Watch 1 Star 1 Fork 0

刘勇 / liuyongotherApache-2.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
daohan.vue 18.27 KB
Copy Edit Web IDE Raw Blame History
liuyong-byte authored 2020-04-18 16:48 . vue
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
<template>
<div>
<el-tag type="success" closable >变迁</el-tag>
<el-input v-model="inp" placeholder="" auto-complete="off"></el-input>
<el-input-number v-model="inp" :precision="2" :step="2" :min="1" :max="10" label="label"></el-input-number>
<el-row class="demo-autocomplete">
<el-col :span="12">
<div class="sub-title">激活即列出输入建议</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
>
<!--:fetch-suggestions="function a(){}"获取输入的值,通过函数a(input输入的值,回调函数cd) 返回数据到模块 -->
<template slot-scope="{ item }">
<!-- <div class="name">{{ item.value }} item输入建议对象</div>
<span class="addr">{{ item.address }}</span> -->
<span>{{item.value}}{{item.address}}</span>
</template>
</el-autocomplete>
</el-col>
<el-col :span="12">
<div class="sub-title">输入后匹配输入建议</div>
<el-autocomplete
class="inline-input"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect"
>
</el-autocomplete>
</el-col>
</el-row>
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.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="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
模块循环类数组 {{scope.row}}
</template>
</el-table-column>
</el-table>
<el-tag
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<!-- <el-tag
effect="plain"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag> -->
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
<el-progress type="circle" :stroke-width="26" :percentage="25" :format="fo" status="success"></el-progress>
<el-tree
:data="tree"
@node-click="handleNodeClick">
</el-tree>
<span class="demonstration">页数较少时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
<el-pagination
layout="prev, pager, next"
:total="1000"
background
>
</el-pagination>
<el-badge :value="12" :max="10" class="item">
<el-button size="small">评论</el-button>
<el-dropdown>
<el-button type="primary">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item>黄金糕</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-badge>
<el-badge is-dot class="item">数据查询</el-badge>
<el-alert
title="success"
type="success" close-text="知道"
center
>
</el-alert>
<el-button type="success" loading ></el-button>
<el-button
type="primary"
@click="openFullScreen2">
服务方式
</el-button>
<el-button :plain="true" @click="openVn">VNode</el-button>
<el-menu mode="horizontal" >
<el-menu-item index="1">1</el-menu-item>
<el-menu-item index="1">3</el-menu-item>
<el-submenu index="2">
<template slot="title">2</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item index="2-1">
<el-submenu index="">
<template slot="title">2</template>
<el-menu-item index="">11</el-menu-item>
</el-submenu>
</el-menu-item>
</el-submenu>
</el-menu>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
<el-time-picker
v-model="time"
:picker-options="{ selectableRange: '00:00:00 - 23:59:00' }"
placeholder="任意时间" >
</el-time-picker>
{{time}}
<el-radio-group v-model="direction">
<el-radio label="ltr">从左往右开</el-radio>
<el-radio label="rtl">从右往左开</el-radio>
<el-radio label="ttb">从上往下开</el-radio>
<el-radio label="btt">从下往上开</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:direction="direction"
:show-close="true">
<span>我来啦!</span>
</el-drawer>
<el-backtop ></el-backtop>
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<el-popconfirm
confirmButtonText='好的'
cancelButtonText='不用了'
icon="el-icon-info"
iconColor="red"
title="这是一段内容确定删除吗?"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>需要注意的是内容是默认不居中的</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
centerDialogVisible: false,
drawer: false,
direction: 'rtl',
// t:new Date().toLocaleString(),
t:"1",
time:new Date().toLocaleString(),
isCollapse: true,
tree:[
{
label:"q",
children:[
{
label:"w"
}
]
}
],
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
,
tags: [
{ name: '标签一', type: '' },
{ name: '标签二', type: 'success' },
{ name: '标签三', type: 'info' },
{ name: '标签四', type: 'warning' },
{ name: '标签五', type: 'danger' }
]
,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
,
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
,
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
labelPosition:"right",
restaurants: [],
state1: '',
state2: '',
inp:0,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
openVn() {
// const h = this.$createElement;
// this.$message({
// message: h('p', null, [
// h('span', null, '内容可以是 '),
// h('i', { style: 'color: teal' }, 'VNode')
// ])
// })
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 1000,
type:"error",
position:"bottom-right"//上 下在前面
});
// this.$prompt('请输入邮箱', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: '邮箱格式不正确'
// }).then(({ value }) => {
// this.$message({
// type: 'success',
// message: '你的邮箱是: ' + value
// });
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '取消输入'
// });
// });
// this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// this.$message({
// type: 'success',
// message: '删除成功!'
// })
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// })
// })
// this.$message.error("错误了 小哥哥 你干嘛点我")
//this.$alert("")
// let a=this.$confirm("点 我 干 嘛")
// a.then((x)=>{
// console.log(x)
// })
// console.log(a)
// this.$message({
// dangerouslyUseHTMLString: true,
// message: '<strong>这是 <i>HTML</i> 片段</strong>'
// })
//
}
,
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
},
handleNodeClick(data) {
console.log(data);
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
fo(percentage) {
return percentage === 100 ? '' : `${percentage}%`;
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter((restaurant) => {//过滤函数变量数组类数字返回操作值
if(restaurant.value.indexOf(queryString)===0){
return restaurant
}
// return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
}) : restaurants;
// 调用 callback 返回建议列表的数据
console.log(typeof results)
cb(results);//返回对象js里面数组是对象数据类型是object
},
loadAll() {
return [
{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
];
},
handleSelect(item) {
console.log(item.value)
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>

Comment ( 0 )

Sign in for post a comment

other
1
https://gitee.com/liuyong-byte/liuyong.git
git@gitee.com:liuyong-byte/liuyong.git
liuyong-byte
liuyong
liuyong
master

Search