mirror of
https://gitcode.com/flipped-aurora/gin-vue-admin.git
synced 2026-05-21 06:37:48 +00:00
清理图标 form table 富文本 示例
This commit is contained in:
QM303176530
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="form" label-width="80px" ref="form">
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动名称</label></el-col>
|
||||
<el-col :span="10" :xs="14"><el-input v-model="form.name"></el-input></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动区域</label></el-col>
|
||||
<el-col :span="10" :xs="14">
|
||||
<el-select placeholder="请选择活动区域" v-model="form.region">
|
||||
<el-option label="上海" value="shanghai"></el-option>
|
||||
<el-option label="北京" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动时间</label></el-col>
|
||||
<el-col :span="10" :xs="18">
|
||||
<el-col :span="11">
|
||||
<el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" class="line">——</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker placeholder="选择时间" style="width: 100%;" v-model="form.date2"></el-time-picker>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">即时配送</label></el-col>
|
||||
<el-col :span="10" :xs="14"><el-switch v-model="form.delivery"></el-switch></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动性质</label></el-col>
|
||||
<el-col :span="10" :xs="14">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">特殊资源</label></el-col>
|
||||
<el-col :span="10" :xs="14">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动形式</label></el-col>
|
||||
<el-col :span="10" :xs="14"><el-input type="textarea" v-model="form.desc"></el-input></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">穿梭框</label></el-col>
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-transfer
|
||||
:data="data"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
filterable
|
||||
v-model="value"
|
||||
></el-transfer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3" :xs="6"><label for="">活动时间</label></el-col>
|
||||
<el-col :span="10"><el-input v-model="form.name"></el-input></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="13">
|
||||
<el-button @click="onSubmit" type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<!-- <el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select label="活动区域" placeholder="请选择活动区域" v-model="form.region">
|
||||
<el-option label="上海" value="shanghai"></el-option>
|
||||
<el-option label="北京" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" class="line" style="text-align: center">——</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker placeholder="选择时间" style="width: 100%;" v-model="form.date2"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="穿梭框">
|
||||
<el-transfer
|
||||
:data="data"
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
filterable
|
||||
v-model="value"
|
||||
></el-transfer>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSubmit" type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = () => {
|
||||
const data = []
|
||||
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
|
||||
const pinyin = [
|
||||
'shanghai',
|
||||
'beijing',
|
||||
'guangzhou',
|
||||
'shenzhen',
|
||||
'nanjing',
|
||||
'xian',
|
||||
'chengdu'
|
||||
]
|
||||
cities.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
pinyin: pinyin[index]
|
||||
})
|
||||
})
|
||||
return data
|
||||
}
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
data: generateData(),
|
||||
value: [],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1
|
||||
},
|
||||
onSubmit() {
|
||||
this.$message({
|
||||
message: '创建成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>富文本编辑器</h1>
|
||||
<div class="edit_container">
|
||||
<quill-editor
|
||||
:options="editorOption"
|
||||
@blur="onEditorBlur($event)"
|
||||
@change="onEditorChange($event)"
|
||||
@focus="onEditorFocus($event)"
|
||||
ref="myQuillEditor"
|
||||
v-model="content"
|
||||
></quill-editor>
|
||||
<el-button plain @click="saveHtml">保存</el-button>
|
||||
</div>
|
||||
<h1>markdown编辑器</h1>
|
||||
<div class="edit">
|
||||
<mavon-editor v-model="model.content"></mavon-editor>
|
||||
<el-button type="primary" size="small" @click="submit">发表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
content: `<p>hello world</p>`,
|
||||
editorOption: {},
|
||||
model:{
|
||||
content:''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myQuillEditor.quill
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// onEditorReady(editor) { // 准备编辑器
|
||||
|
||||
// },
|
||||
onEditorBlur() {}, // 失去焦点事件
|
||||
onEditorFocus() {}, // 获得焦点事件
|
||||
onEditorChange() {}, // 内容改变事件
|
||||
saveHtml() {
|
||||
console.log(this.content)
|
||||
}, // 保存方法
|
||||
submit(){}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,115 +0,0 @@
|
||||
// table 纯前端示例
|
||||
<template>
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
border
|
||||
ref="multipleTable"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
>
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column label="日期" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="120"></el-table-column>
|
||||
<el-table-column label="年龄" prop="age" width="120"></el-table-column>
|
||||
<el-table-column label="住址" prop="address" min-width="200" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="是否禁用" prop="switch" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-switch active-text="开启" inactive-text="禁用" v-model="scope.row.switch"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="按钮组" width="200">
|
||||
<template slot-scope="scope" >
|
||||
<el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮1</el-button>
|
||||
<el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮2</el-button>
|
||||
<el-button type="text" size="small" @click="toggleSelection([scope.row])">按钮3</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
|
||||
<el-button @click="toggleSelection()">取消选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Table',
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:true
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:false
|
||||
},
|
||||
{
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:true
|
||||
},
|
||||
{
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:true
|
||||
},
|
||||
{
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
age: 12,
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
switch:false
|
||||
}
|
||||
],
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row)
|
||||
})
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user