1. Introduction
Last time I talked about the component (VUE component development Exercise – Focus map switch), this time I will talk about the vue plug-in training project. Compared to the current focus diagram switch components, this may be more simple, basic is familiar with the steps of plug-in development can be! In this project, I recommend you to practice, this popover is more practical than the previous focus diagram, and more commonly used. At the same time, we can also be familiar with the process of vUE plug-in development. Code also, I will upload to Github (EC-dialog), need to go directly to see the code!
Suggestion 1. The following steps, it is best to run on their own local, according to the steps of the article, step by step to complete, if only look at the code, it is easy to be confused. 2. If you don’t know which code has what effect, you may debug it yourself. After removing the code, you can see what effect it has, and it is easy to figure out what effect the code has!
2. Project Catalog
Or a very simple directory, each directory do not know what to use, you can move to see my last article. The difference is in the SRC /js/components folder.
3. Development process
3-1. Run the project
First, make SRC /js/components/ Alert. Still the same, and first in the SRC/js/components/alert/SRC/main vue. Output ‘wait’. The following code
<template>
<transition name="ec">
<div class="ec"</div> </transition> </template> <script>export default {
data () {
return {
name: 'ec-alert',
}
},
computed: {},
mounted () {
},
methods: {
}
}
</script>
Copy the codeThen go to ‘alert/index.js’. I’m not sure what the term is, but I’ll just call it a plug-in configuration file. The code looks like this (note the comments)
import Vue from 'vue'
import AlertComponent from './src/main.vue'// Merge object functions. This method changes the value of the first argumentfunction merge(target) {
for (let i = 1, j = arguments.length; i < j; i++) {
let source = arguments[i] || {};
for (let prop in source) {
if (source.hasOwnProperty(prop)) {
let value = source[prop];
if(value ! == undefined) { target[prop] = value; }}}}return target;
};
letinstance; //extend is a constructor for a component. Pass in an argument and return a componentlet AlertConstructor = Vue.extend(AlertComponent);
letInitInstance = ()=>{// instantiate ConfirmConstructor component instance = new AlertConstructor({el: document.createElement())'div')}); / / added to the boby document. The body. The appendChild (instance.$el);
}
letAlert = (options={}) => {// initialize initInstance(); // Merge the configuration of a single confirm instance to the default value (instance.$dataMerge (instance) in data in main.vue.$data, options); / / return Promisereturn new Promise((resolve, reject)=>{
instance.show = true;
let success = instance.success;
letcancel = instance.cancel; Instance.success = () => {// first execute instance.success (main.vue); // execute custom resolve('ok'); }}); }export default Alert;Copy the codeThen go to the components/js/index.js file and configure the components and API as follows
import alert from './alert/index.js'
const install = function(Vue) {// Add global API vue.prototype (alert. Name, alert).$alert = alert
}
export default installCopy the codeThen set a div in the template file, index.html, to facilitate the mount test
<! DOCTYPE html> <html lang="en">
<meta name="viewport" content="Width = device - width, user - scalable = no, minimum - scale = 1.0, the maximum - scale = 1.0">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html> Copy the codeThen, in the entry file index.js, use the plugin
require("./index.html"); // introduce sass require("./src/sass/com.scss");
import Vue from 'vue'
import dialog from './src/js/components/index';
Vue.use(dialog)
let App = new Vue({
el: '#app'.data() {return {
'name': 'index'}},mounted(){
this.$alert();
}
});Copy the codeThen, the command line $NPM run dev is perfect
3-2. Style modification
With the last step, the majority of the plug-in is complete! The rest of the work is mainly developed in components/.. /main.vue This file is developed. First, before you write code, think about what fields a popover might need.
Refer to the above, find a title, a content, a button text. Finally, we need a variable that controls whether the popover displays. And then a button click action function. And then there’s the style, which looks something like this
Style this not to say, other fields, one radish one pit to fill in, the code is as follows
<template>
<transition name="ec">
<div v-if="show" class="ec">
<div class="ec-box">
<div class="ec-box-inner"> <! --> <div class="ec-title" v-if="title">{{title}}</div> <! -- content --> <div class="ec-content">{{content}}</div> </div> <! --> <div class="ec-box-buttons">
<span class="ec-btn-success" @click="success">{{submitText}}</span>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
name:'ec-alert',
show: false,
title: 'tip',
content: ' ',
submitText: 'sure',
cancelText: 'cancel'
}
},
computed: {},
mounted() {}, methods: {// button eventssuccess () {
this.show = false;
}
}
}
</script>
<style lang="scss" scoped>
.ec {
background: rgba(00, 00, 00, .5);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
.ec-box {
width: 80%;
max-width: 400px;
top: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
background: #fff;
box-sizing: border-box;
padding: 20px;
border-radius: 6px;
}
.ec-title {
padding-left: 0;
margin-bottom: 0;
font-size: 16px;
font-weight: 700;
height: 18px;
color: # 333;
}
.ec-content {
padding: 14px 0;
line-height: 24px;
color: #48576a;
font-size: 14px;
}
.ec-box-buttons {
text-align: right;
}
.ec-btn-success {
background: #20a0ff;
border-color: #20a0ff;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: #fff;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
}
.ec-btn-cancel {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c4c4c4;
color: #1f2d3d;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
}
}
.ec-enter {
opacity: 0;
.ec-box {
transform:scale(0);
}
}
.ec-enter-active {
transition: opacity .4s;
.ec-box {
transition: transform .4s;
}
}
.ec-leave-active{
transition: opacity .2s;
.ec-box {
transition: transform .2s;
}
}
.ec-leave-active {
opacity: 0;
}
</style>
Copy the codeRunning effect
3-3. Use plug-ins
As you know, in the previous step, ‘alert/index.js’ was already returning a Promise. So, use it like Promise!
So just write it in the entry file, index.js
mounted(){
this.$alert({
title:'2',
content:'Here's hint 2.'
}).then(()=>{
this.name='wait'
alert(this.name)
})
}
Copy the codeRunning effect
4. Other popovers
Again, programmers aren’t going to be satisfied with just one popover, but I’m going to add another one, which is basically the same as the one above, but with a cancel button. I’m just going to do one more simple thing here, but as for the popover style, there are too many, I won’t expand it here, you can expand it if you want.
First, create this directory (you can just copy the alert directory and modify it a few times).
Then, for the comfirm/ SRC /main.vue file, add the following code (the following code is basically copied from alert/ SRC /main.vue, adding a field and action function for the cancel button)
<template>
<transition name="ec">
<div v-if="show" class="ec">
<div class="ec-box">
<div class="ec-box-inner"> <! --> <div class="ec-title" v-if="title">{{title}}</div> <! -- content --> <div class="ec-content">{{content}}</div> </div> <! --> <div class="ec-box-buttons">
<span class="ec-btn-success" @click="success">{{submitText}}</span>
<span class="ec-btn-cancel" @click="cancel">{{cancelText}}</span>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
name:'ec-comfirm',
show: false,
title: 'tip',
content: ' ',
submitText: 'sure',
cancelText: 'cancel'
}
},
computed: {},
mounted() {}, methods: {// Determine button eventssuccess () {
this.show = false; }, // Cancel button eventcancel () {
this.show = false;
}
}
}
</script>
<style lang="scss" scoped>
.ec {
background: rgba(00, 00, 00, .5);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
.ec-box {
width: 80%;
max-width: 400px;
top: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
background: #fff;
box-sizing: border-box;
padding: 20px;
border-radius: 6px;
}
.ec-title {
padding-left: 0;
margin-bottom: 0;
font-size: 16px;
font-weight: 700;
height: 18px;
color: # 333;
}
.ec-content {
padding: 14px 0;
line-height: 24px;
color: #48576a;
font-size: 14px;
}
.ec-box-buttons {
text-align: right;
}
.ec-btn-success {
background: #20a0ff;
border-color: #20a0ff;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: #fff;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
}
.ec-btn-cancel {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c4c4c4;
color: #1f2d3d;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
}
}
.ec-enter {
opacity: 0;
.ec-box {
transform:scale(0);
}
}
.ec-enter-active {
transition: opacity .4s;
.ec-box {
transition: transform .4s;
}
}
.ec-leave-active{
transition: opacity .2s;
.ec-box {
transition: transform .2s;
}
}
.ec-leave-active {
opacity: 0;
}
</style>
Copy the codeThen comfirm/index.js(also a basic copy, I will take a screenshot, tell you where to change, this will have to look a little more carefully to know where to change)
Then the components/index. Js
import comfirm from './comfirm/index.js'
import alert from './alert/index.js'
const install = functionVue.prototype (alert. Name, alert) {// Add global API vue.prototype.$confirm = comfirm
Vue.prototype.$alert = alert
}
export default installCopy the codeFinally use in the entry file, index.js
require("./index.html"); // introduce sass require("./src/sass/com.scss");
import Vue from 'vue'
import dialog from './src/js/components/index'; // Use the popover plugin vue.use (dialog)let App = new Vue({
el: '#app'.data() {return {
'name': 'index'}},mounted(){// Trigger the confirm popup this.$confirm({
title:'tip',
content:'Here's the hint.',
submitText:'submit',
cancelText:'return'}).then(()=>{// Trigger alert popup this.$alert({
title:'2',
content:'Here's hint 2.'
}).then(()=>{
this.name='wait'
alert(this.name)
})
}).catch((err)=>{
alert(err)
})
}
});
Copy the codeThe result of the run, that’s it
5. Summary
A simple popover is there, very simple, but in my development there still works, for the time being satisfied. But this definitely needs to be maintained, after all, many projects need popovers. Everyone also according to their own needs to expand! The above case is also very simple, easy to understand. Basically remember the process. But this is one that I highly recommend reading as you go along. This can let yourself practice based on vUE plug-in development, is a good exercise, I hope to help you learn new knowledge! Finally, if you feel that the article is not good or wrong, welcome to point out!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
