day05
文章目录
- 自定义指令
-
- 全局注册（在main.js中）
- 局部注册
- 插槽
-
- 默认插槽
- 后备内容
- 具名插槽
- 作用域插槽
- 路由介绍
自定义指令
全局注册（在main.js中）
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 1. 全局注册指令
Vue.directive('focus', {
// inserted 会在 指令所在的元素，被插入到页面中时触发
inserted (el) {
// el 就是指令所绑定的元素
// console.log(el);
el.focus()
}
})
new Vue({
render: h => h(App),
}).$mount('#app')
局部注册
<template>
<div>
<h1 v-color="color1">指令的值1测试h1>
<h1 v-color="color2">指令的值2测试h1>
div>
template>
<script>
export default {
data () {
return {
color1: 'red',
color2: 'orange'
}
},
directives: {
color: {
// 1. inserted 提供的是元素被添加到页面中时的逻辑
inserted (el, binding) {
// binding.value 就是指令的值
el.style.color = binding.value
},
// 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
update (el, binding) {
el.style.color = binding.value
}
}
}
}
script>
<style>
style>
插槽
默认插槽
MyDialog.vue
<template>
<div class="dialog">
<div class="dialog-header">
<h3>友情提示h3>
<span class="close">✖️span>
div>
<div class="dialog-content">
<slot>slot>
div>
<div class="dialog-footer">
<button>取消button>
<button>确认button>
div>
div>
template>
<script>
export default {
data () {
return {
}
}
}
script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.dialog {
width: 470px;
height: 230px;
padding: 0 25px;
background-color: #ffffff;
margin: 40px auto;
border-radius: 5px;
}
.dialog-header {
height: 70px;
line-height: 70px;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.dialog-header .close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
.dialog-content {
height: 80px;
font-size: 18px;
padding: 15px 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.dialog-footer button {
width: 65px;
height: 35px;
background-color: #ffffff;
border: 1px solid #e1e3e9;
cursor: pointer;
outline: none;
margin-left: 10px;
border-radius: 3px;
}
.dialog-footer button:last-child {
background-color: #007acc;
color: #fff;
}
style>
App.vue
<template>
<div>
<MyDialog>
<div>你确认要删除么div>
MyDialog>
<MyDialog>
<p>你确认要退出么p>
MyDialog>
div>
template>
<script>
import MyDialog from './components/MyDialog.vue'
export default {
data () {
return {
}
},
components: {
MyDialog
}
}
script>
<style>
body {
background-color: #b3b3b3;
}
style>
后备内容
MyDialog.vue
<template>
<div class="dialog">
<div class="dialog-header">
<h3>友情提示h3>
<span class="close">✖️span>
div>
<div class="dialog-content">
<slot>
我是默认的文本内容
slot>
div>
<div class="dialog-footer">
<button>取消button>
<button>确认button>
div>
div>
template>
<script>
export default {
data () {
return {
}
}
}
script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.dialog {
width: 470px;
height: 230px;
padding: 0 25px;
background-color: #ffffff;
margin: 40px auto;
border-radius: 5px;
}
.dialog-header {
height: 70px;
line-height: 70px;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.dialog-header .close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
.dialog-content {
height: 80px;
font-size: 18px;
padding: 15px 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.dialog-footer button {
width: 65px;
height: 35px;
background-color: #ffffff;
border: 1px solid #e1e3e9;
cursor: pointer;
outline: none;
margin-left: 10px;
border-radius: 3px;
}
.dialog-footer button:last-child {
background-color: #007acc;
color: #fff;
}
style>
App.vue
<template>
<div>
<MyDialog>MyDialog>
<MyDialog>
你确认要退出么
MyDialog>
div>
template>
<script>
import MyDialog from './components/MyDialog.vue'
export default {
data () {
return {
}
},
components: {
MyDialog
}
}
script>
<style>
body {
background-color: #b3b3b3;
}
style>
具名插槽
MyDialog.vue
<template>
<div class="dialog">
<div class="dialog-header">
<slot name="head">slot>
div>
<div class="dialog-content">
<slot name="content">slot>
div>
<div class="dialog-footer">
<slot name="footer">slot>
div>
div>
template>
<script>
export default {
data () {
return {
}
}
}
script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.dialog {
width: 470px;
height: 230px;
padding: 0 25px;
background-color: #ffffff;
margin: 40px auto;
border-radius: 5px;
}
.dialog-header {
height: 70px;
line-height: 70px;
font-size: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.dialog-header .close {
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
}
.dialog-content {
height: 80px;
font-size: 18px;
padding: 15px 0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.dialog-footer button {
width: 65px;
height: 35px;
background-color: #ffffff;
border: 1px solid #e1e3e9;
cursor: pointer;
outline: none;
margin-left: 10px;
border-radius: 3px;
}
.dialog-footer button:last-child {
background-color: #007acc;
color: #fff;
}
style>
App.vue
<template>
<div>
<MyDialog>
<template v-slot:head>
<div>我是大标题div>
template>
<template v-slot:content>
<div>我是内容div>
template>
<template #footer>
<button>取消button>
<button>确认button>
template>
MyDialog>
div>
template>
<script>
import MyDialog from './components/MyDialog.vue'
export default {
data () {
return {
}
},
components: {
MyDialog
}
}
script>
<style>
body {
background-color: #b3b3b3;
}
style>
作用域插槽
MyTable.vue
<template>
<table class="my-table">
<thead>
<tr>
<th>序号th>
<th>姓名th>
<th>年纪th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(item, index) in data" :key="item.id">
<td>{{ index + 1 }}td>
<td>{{ item.name }}td>
<td>{{ item.age }}td>
<td>
<slot :row="item" msg="测试文本">slot>
td>
tr>
tbody>
table>
template>
<script>
export default {
props: {
data: Array
}
}
script>
<style scoped>
.my-table {
width: 450px;
text-align: center;
border: 1px solid #ccc;
font-size: 24px;
margin: 30px auto;
}
.my-table thead {
background-color: #1f74ff;
color: #fff;
}
.my-table thead th {
font-weight: normal;
}
.my-table thead tr {
line-height: 40px;
}
.my-table th,
.my-table td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.my-table td:last-child {
border-right: none;
}
.my-table tr:last-child td {
border-bottom: none;
}
.my-table button {
width: 65px;
height: 35px;
font-size: 18px;
border: 1px solid #ccc;
outline: none;
border-radius: 3px;
cursor: pointer;
background-color: #ffffff;
margin-left: 5px;
}
style>
App.vue
<template>
<div>
<MyTable :data="list">
<template #default="obj">
<button @click="del(obj.row.id)">
删除
button>
template>
MyTable>
<MyTable :data="list2">
<template #default="{ row }">
<button @click="show(row)">查看button>
template>
MyTable>
div>
template>
<script>
import MyTable from './components/MyTable.vue'
export default {
data () {
return {
list: [
{ id: 1, name: '张小花', age: 18 },
{ id: 2, name: '孙大明', age: 19 },
{ id: 3, name: '刘德忠', age: 17 },
],
list2: [
{ id: 1, name: '赵小云', age: 18 },
{ id: 2, name: '刘蓓蓓', age: 19 },
{ id: 3, name: '姜肖泰', age: 17 },
]
}
},
methods: {
del (id) {
this.list = this.list.filter(item => item.id !== id)
},
show (row) {
alert(`姓名：${row.name}; 年纪：${row.age}`)
}
},
components: {
MyTable
}
}
script>
路由介绍
npm install [email protected] 也可以
注： 路由组件放到views目录下、 复用组件放到components目录下