123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/classNames'
- import { $wuxBackdrop } from '../index'
- const defaults = {
- prefixCls: 'wux-actionsheet',
- classNames: 'wux-animate--slideInUp',
- theme: 'ios',
- className: '',
- titleText: '',
- buttons: [],
- buttonClicked() {},
- cancelText: '取消',
- cancel() {},
- // destructiveText: '删除',
- // destructiveButtonClicked() {},
- }
- baseComponent({
- useFunc: true,
- data: defaults,
- computed: {
- classes() {
- const { prefixCls, theme, buttons } = this.data
- const content = classNames(`${prefixCls}__content`, {
- [`${prefixCls}__content--theme-${theme}`]: theme,
- })
- const options = classNames(`${prefixCls}__group`, {
- [`${prefixCls}__group--options`]: true,
- })
- const title = `${prefixCls}__title`
- const destructive = classNames(`${prefixCls}__button`, {
- [`${prefixCls}__button--destructive`]: true,
- })
- const button = buttons.map((button) => {
- const wrap = classNames(`${prefixCls}__button`, {
- [`${prefixCls}__button--option`]: true,
- [`${prefixCls}__button--disabled`]: button.disabled,
- [`${button.className}`]: button.className,
- })
- const hover = button.hoverClass && button.hoverClass !== 'default' ? button.hoverClass : `${prefixCls}__button--hover`
- return {
- wrap,
- hover,
- }
- })
- const icon = `${prefixCls}__icon`
- const text = `${prefixCls}__text`
- const group = classNames(`${prefixCls}__group`, {
- [`${prefixCls}__group--cancel`]: true,
- })
- const cancel = classNames(`${prefixCls}__button`, {
- [`${prefixCls}__button--cancel`]: true,
- })
- const hover = `${prefixCls}__button--hover`
- return {
- content,
- options,
- title,
- button,
- icon,
- text,
- destructive,
- group,
- cancel,
- hover,
- }
- },
- },
- methods: {
- /**
- * 显示
- */
- showSheet(opts = {}) {
- const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
- this.removed = false
- this.$$setData({ in: true, ...options })
- this.$wuxBackdrop.retain()
- return this.cancel.bind(this)
- },
- /**
- * 隐藏
- */
- removeSheet(callback) {
- if (this.removed) return false
- this.removed = true
- this.$$setData({ in: false })
- this.$wuxBackdrop.release()
- if (typeof callback === 'function') {
- callback(this.data.buttons)
- }
- },
- /**
- * 按钮点击事件
- */
- buttonClicked(e) {
- const { index } = e.currentTarget.dataset
- if (this.fns.buttonClicked(index, this.data.buttons[index]) === true) {
- this.removeSheet()
- }
- },
- /**
- * 删除按钮点击事件
- */
- destructiveButtonClicked() {
- if (this.fns.destructiveButtonClicked() === true) {
- this.removeSheet()
- }
- },
- /**
- * 取消按钮点击事件
- */
- cancel() {
- this.removeSheet(this.fns.cancel)
- },
- bindgetuserinfo(e) {
- this.triggerEvent('getuserinfo', {...e.detail, ...e.currentTarget.dataset })
- },
- bindcontact(e) {
- this.triggerEvent('contact', {...e.detail, ...e.currentTarget.dataset })
- },
- bindgetphonenumber(e) {
- this.triggerEvent('getphonenumber', {...e.detail, ...e.currentTarget.dataset })
- },
- bindopensetting(e) {
- this.triggerEvent('opensetting', {...e.detail, ...e.currentTarget.dataset })
- },
- onError(e) {
- this.triggerEvent('error', {...e.detail, ...e.currentTarget.dataset })
- },
- },
- created() {
- this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
- },
- })
|