一、基础篇(只是修改当前的主题,项目中只有一个主题的情况下使用) 1、进入项目文件夹 cd ‘文件夹名称’ 2、全局安装主题生成工具 npm install element-theme -g 1. 3、在项目中安装chalk主题 npm install element-chalk -D 1. 4、初始化变量 et -i 1. 初始化成功之后,会在根目录下生成 element-variables...
import CustToast from './CustToast.vue' // 生成一个扩展实例构造器 const ToastConstructor = vue.extend(CustToast); // 定义弹出组件的函数 接收三个参数 消息 toast类型 显示时间 function showToast(message, type="normal", duration = 2000) { // 实例化一个 CustToast.vue const _toast = new Toas...
// message.jsimportVuefrom"vue";// 引入 Vue 是因为要用到 Vue.extend() 这个方法importmessagefrom"./message.vue";// 引入刚才的 toast 组件constToast=function(){instance=newToastConstructor().$mount();// 渲染组件};letmessageConstructor=Vue.extend(message);// 这个在前面的前置知识内容里面有讲到...
简介:组件toast(类似于element-ui的message组件)的实现 实现的toast组件可以通过this.$toast()调用 需要的知识: vue.extend(); new Vue().$mount(); //如果mount内没有要挂载的元素vue只会渲染元素而不会加载的界面上 toast.vue的内容 <!--template的内容--><template><slot>{{message}}</slot></template...
duration:1500,//默认toast消失的时间message: '',//toast显示的内容} }, mounted(){ setTimeout(()=>{this.$destroy(true);this.$el.parentNode.removeChild(this.$el); },this.duration) } } toast.js的内容 import Vue from 'vue'; import toast from'./toast.vue'; ...
在需要对用户进行提示时,有时会遇到这种场景:使用模态框提示太过硬核,使用toast提示又太轻了,这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。 思路梳理 首先我们来看下element-ui中消息提示的效果是怎么样的,找些思路。
</el-form-item> </el-form> 对应的data()里边写rule{} data() { return { formData: { visitorName: '', cardType: 1, cardCode: '' }, rule: { visitorName: [ { required: true, message: '请输入姓名', trigger: 'blur' },
在需要对用户进行提示时,有时会遇到这种场景:使用模态框提示太过硬核,使用toast提示又太轻了,这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。 思路梳理 首先我们来看下element-ui中消息提示的效果是怎么样的,找些思路。
import Vue from 'vue'; import Toast from './Toast.vue'; //引入组件 let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” let myToast = ({text,duration})=>{ if(!text){ return } let toastDom = new ToastConstructor({ el:document.createElement('div') //将toast组件挂...
modal-3传递参数 11:48 toast-1基本布局,点击出现和自动关闭 16:09 toast-2动画效果 07:57 uploader文件上传 基本布局 第一章 08:35 uploader-2上传图片blob和base64格式 29:28 uploader-3上传后的图片展示 12:18 uploader-4拖拽上传 08:19 uloader-5上传七牛CDN ...