64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<el-main>
|
|
<el-card shadow="never">
|
|
<x-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
|
|
<el-table :data="tableData" border stripe style="width: 100%">
|
|
<el-table-column prop="date" label="Date" width="180" />
|
|
<el-table-column prop="name" label="Name" width="180" />
|
|
<el-table-column prop="address" label="Address" />
|
|
</el-table>
|
|
</x-water-mark>
|
|
</el-card>
|
|
<el-card shadow="never" style="margin-top: 15px;">
|
|
<el-button type="primary" @click="create">创建水印</el-button>
|
|
<el-button type="primary" @click="clear">移除水印</el-button>
|
|
</el-card>
|
|
</el-main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'watermark',
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-02',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
create(){
|
|
this.$refs.wm.create()
|
|
},
|
|
clear(){
|
|
this.$refs.wm.clear()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|