Vue实现vuex功能封装方法

<!-- components/MyButton.vue -->
<template>
  <button 
    class="my-button" 
    :class="[typeClass, sizeClass, { disabled: disabled }]"
    @click="$emit('click', $event)"
    :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    // 按钮类型
    type: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'primary', 'success', 'warning', 'error'].includes(value)
      }
    },
    // 按钮大小
    size: {
      type: String,
      default: 'medium',
      validator: (value) => {
        return ['small', 'medium', 'large'].includes(value)
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    typeClass() {
      return `my-button--${this.type}`
    },
    sizeClass() {
      return `my-button--${this.size}`
    }
  }
}
</script>

<style scoped>
.my-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.my-button--default {
  background-color: #f5f5f5;
  color: #333;
}

.my-button--primary {
  background-color: #1890ff;
  color: #fff;
}

/* 其他样式省略 */

.my-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

// plugins/toast/index.js
import Toast from './Toast.vue'
import Vue from 'vue'

// 创建构造器
const ToastConstructor = Vue.extend(Toast)

let toastInstance = null

// 定义 toast 函数
function showToast(options = {}) {
  // 如果已经有实例，先关闭
  if (toastInstance) {
    toastInstance.close()
  }
  
  // 创建实例
  toastInstance = new ToastConstructor({
    data: options
  }).$mount()
  
  // 添加到 DOM
  document.body.appendChild(toastInstance.$el)
  
  // 自动关闭
  if (options.duration !== 0) {
    setTimeout(() => {
      toastInstance.close()
    }, options.duration || 3000)
  }
  
  return toastInstance
}

// 注册为 Vue 插件
function install(Vue) {
  Vue.prototype.$toast = showToast
  
  // 注册不同类型的快捷方法
  ['success', 'error', 'warning', 'info'].forEach(type => {
    Vue.prototype.$toast[type] = (message, duration) => {
      return showToast({
        message,
        type,
        duration
      })
    }
  })
}

export default {
  install
}

<!-- plugins/toast/Toast.vue -->
<template>
  <div class="toast" :class="type" v-if="visible">
    <div class="toast__content">{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      type: 'info',
      duration: 3000,
      visible: false
    }
  },
  mounted() {
    this.visible = true
  },
  methods: {
    close() {
      this.visible = false
      // 清除实例引用
      setTimeout(() => {
        if (this.$el && this.$el.parentNode) {
          this.$el.parentNode.removeChild(this.$el)
        }
        toastInstance = null
      }, 300)
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 9999;
  transition: opacity 0.3s;
}

.toast.success {
  background-color: rgba(72, 187, 120, 0.9);
}

/* 其他类型样式省略 */
</style>

// main.js
import Vue from 'vue'
import MyButton from './components/MyButton.vue'
import Toast from './plugins/toast'

// 注册全局组件
Vue.component('MyButton', MyButton)

// 安装插件
Vue.use(Toast)

new Vue({
  el: '#app',
  render: h => h(App)
})

<template>
  <div>
    <my-button type="primary" @click="handleClick">点击我</my-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$toast.success('操作成功')
    }
  }
}
</script>

// utils/validator.js
export const validator = {
  // 验证手机号
  isPhone(value) {
    return /^1[3-9]\d{9}$/.test(value)
  },
  
  // 验证邮箱
  isEmail(value) {
    return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
  },
  
  // 验证身份证号
  isIdCard(value) {
    return /(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
  }
}

import { validator } from '@/utils/validator'

if (validator.isPhone(phoneNumber)) {
  // 手机号格式正确
}