内容居中写法:
flex flex-center
创建1.0版本的应用
quasar create <folder_name> --branch v1
自定义组件实现校验
1.组件上必须添加样式 q-validation-component
<div class="col q-pa-sm q-validation-component">
2.定义两个方法
validate() {
if (this.data.length === 0) {
this.errMsg = '不能为空!';
return false;
}
return true;
},
resetValidation() {
this.errMsg = '';
},
可以通过这个属性context-menu来实现右键菜单
<q-menu context-menu auto-close>
<q-list style="min-width: 100px">
<q-item clickable>
<q-item-section>关闭左侧</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>关闭右侧</q-item-section>
</q-item>
<q-separator />
<q-item clickable>
<q-item-section>关闭其他</q-item-section>
</q-item>
</q-list>
</q-menu>
这种方式可以自定义右键事件
@contextmenu.prevent="rightClick"
rightClick(event) {
},
下拉框自定义选项为颜色:
<div class="col-3">
<h5>图标颜色:</h5>
<q-select
dense
outlined
options-dense
ref="colorSelect"
v-model="form.color"
:options="colorOptions"
emit-value
map-options
>
<template v-slot:option="option">
<q-item clickable v-ripple :class="'bg-'+option.opt.value">
<q-item-section></q-item-section>
</q-item>
</template>
</q-select>
</div>
样式相关:
.cc-admin
display flex
flex-wrap wrap
>div
padding 16px 16px
margin 8px 8px
flex 10000 1 0%
box-shadow 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%)
.q-field--auto-height.q-field--labeled
.q-field__control-container
padding-top: 8px
.q-item__section--side
padding-right: 0
.q-field--dense
.q-field__control
height: 36px
.q-field__marginal
height: 36px
.q-field--auto-height.q-field--dense
.q-field__control, .q-field__native
min-height: 36px
.q-table th
font-size: 14px
.q-tab__label
font-size: 14px
.q-btn__wrapper
padding: 0px 14px 0px 8px
min-height: 32px
.q-btn__content
.q-icon
font-size 18px
.on-left
margin-right 8px;
.q-table
thead
th,td
position sticky
top 0
font-size 14px
transition none
opacity 1
z-index 1
color $t-dark
tr
background #fafafa
th
padding: 0px 8px !important
position sticky
top 0
z-index 1
trnth-child(even)
background #eee
tbody
trnth-child(even)
background #f8f8f8
td
font-size 14px
&.q-table--cell-separator
td,th
border-left-width 0
border-right-width 1px
&last-child
border-right-width 0
&.left_sticky
tdfirst-child
position sticky
left 0
z-index 2
thead thfirst-child
top 0
left 0
z-index 3
.cc-border
border 1px solid #000
.cc-font
color: rgba(0,0,0,.65);
font-size: 14px;
line-height: 22px;
.cc-none-select
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
quasar create folder_name --branch v1
rounded-borders bordered padding
v-model修饰符:
.lazy
By default, v-model syncs the input with the data after each input event. You can add the lazy modifier to instead sync after change events:
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg">
.number
If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model managed inputs:
<input v-model.number="age" type="number">
This is often useful, because even with type="number", the value of HTML input elements always returns a string.
.trim
If you want user input to be trimmed automatically, you can add the trim modifier to your v-model managed inputs:
<input v-model.trim="msg">
class:
bg-light-blue 背景色
bg-positive
漂亮的按钮删除确认
<q-btn class="q-mr-xs" flat dense color="negative" label="删除">
<q-popup-proxy>
<q-banner>
<template v-slot:avatar>
<q-icon name="delete" color="negative" />
</template>
是否删除?
<template v-slot:action>
<q-btn size="small" color="primary" v-close-popup
@click.native="deleteF(table.row.id)">确定</q-btn>
<q-btn size="small" color="negative" v-close-popup >取消</q-btn>
</template>
</q-banner>
</q-popup-proxy>
</q-btn>
按钮摆放位置
<template #top-right>
<q-btn flat round dense size="20px" color="blue-12"
icon="add" @click="open()">
<q-tooltip>新建列</q-tooltip>
</q-btn>
</template>
<template #body-cell-index="props">
<q-td :props="props" :auto-width="true">
{{props.row.index}}
</q-td>
</template>
路由地址:
quasar.conf.js
升级本地组件
yarn upgrade -L
管理员身份
set-executionpolicy remotesigned
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn
yarn upgrade -L
yarn global add quasar-cli
npm uninstall -g quasar-cli; npm i -g quasar-cli@0.6.5
#确保你在全局安装了vue-cli
$ yarn global add vue-cli
# 或:
$ npm install -g vue-cli
#Node.js> = 8.9.0是必需的。
$ yarn global add quasar-cli
# 或:
$ npm install -g quasar-cli
this.$route.query 获取url上参数
this.$store.state.Navigation.deptId 获取当前机构用户等信息
v-if="tab==='disposalProcess' || tab==='history'" 设置对象是否显示
过滤然后给对象添加属性
this.allDeptList = r.data.filter((dept) => dept.id === currentDept.pid).map((v) => ({
sel: true,
selNum: 0,
...v,
}));
计算、观察
computed: {
eventNum() {
return this.allDeptList.filter((dept) => this.eventDeptList.indexOf(dept.id) > -1)
.filter((dept) => dept.sel).length;
},
selNum() {
return function calcNum(value) {
if (value === '00') {
return this.allDeptList.filter((dept) => dept.id === '00')
.filter((dept) => dept.sel).length;
}
return this.allDeptList.filter((dept) => dept.id === value || dept.pid === value)
.filter((dept) => dept.sel).length;
};
},
selectAll: {
get() {
return this.showList.length !== 0 && this.showList.filter((dept) => !dept.sel).length === 0;
},
set(v) {
this.showList.forEach((dept) => {
dept.sel = v;
});
},
},
sendTo: {
get() {
return this.allDeptList.filter((dept) => dept.sel);
},
set() {
},
},
currentSelList() {
return this.showList.filter((dept) => dept.sel);
},
secondDeptList() {
return this.allDeptList.filter((dept) => dept.code.length === 2);
},
},
watch: {
sendTo(n) {
this.unit.value = n.map((v) => v.id).join();
},
},
axios
this.loading = true;
this.$axios.get(`label/labelByParam`).then((r) => {
}).finally(() => {
this.loading = false;
});
提示信息
this.$q.notify({
color: 'negative',
message: '请选择查询条件',
position: 'top',
});
this.$q.notify('保存成功');
this.$q.notify({
color: 'red',
position: 'top',
message: '此路口已添加,不能重复添加!',
});
this.$q.notify({
message: '此事件没有坐标!',
color: 'red',
});
this.$q.notify({
color: 'info',
position: 'top',
message: data.payload === 1 ? '反转方向成功' : '反转方向失败',
});
this.$q.notify({
color: 'red',
position: 'top',
message: '未选择终点',
});
内容垂直居中
row items-center
内容水平居中
row text-center
布局方面
中间占满空间
<q-dialog ref="dialogDesign" maximized flat persistent position="right">
<q-card class="dialog_card column">
<q-card-section class="q-dialog__title">指标设计</q-card-section>
<q-card-section class="row wrap col" >
<idxsetting :config.sync="config" class="col" />
<datasource :config.sync="config" class="col" />
</q-card-section>
<q-card-actions align="right">
<q-btn outline color="white" text-color="primary" label="取消" v-close-popup />
<q-btn unelevated color="primary" class="on-right" label="提交" type="submit" />
</q-card-actions>
</q-card>
</q-dialog>
.dialog_card
background $white
min-width 40vw
height 100vh
pointer-events all
>.view_title
background $base
实现纵向布局
<template>
<q-page class="cls_main column row q-pa-lg">
<div class="col row">
<div class="col column">
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
</div>
<div class="col column">
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
</div>
</div>
</q-page>
</template>
<script>
export default {
name: 'Demo14',
components: {
},
data() {
return {
};
},
methods: {
},
computed: {
},
mounted() {
},
};
</script>
<style lang="stylus">
.cls_main
width 800px
margin 0 auto
.room {
padding: 10px 20px;
background: #e0f7fa;
border: 3px solid #616161;
}
</style>
实现横向布局
<template>
<q-page class="column q-pa-lg">
<div class="col column bg-white shadow-2">
<div class="col row">
<div class="col-3 column room items-center justify-center">
<div>内容</div>
</div>
<div class="col-3 column room items-center justify-center">
<div>内容</div>
</div>
<div class="col-6 column room items-center justify-center">
<div>内容</div>
</div>
</div>
<div class="col row">
<div class="col-6 row">
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
</div>
<div class="col-6 row">
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
<div class="col column room items-center justify-center">
<div>内容</div>
</div>
</div>
</div>
</div>
</q-page>
</template>
<script>
export default {
name: 'Demo14',
components: {
},
data() {
return {
};
},
methods: {
},
computed: {
},
mounted() {
},
};
</script>
<style lang="stylus">
.room {
padding: 10px 20px;
background: #e0f7fa;
border: 3px solid #616161;
}
</style>