quasar 常用

置顶 zwhfyy

已于 2023-03-23 09:21:50 修改

阅读量2.7k

点赞数

分类专栏： quasar 文章标签： elementui linq webview

于 2020-05-29 09:16:37 首次发布

本文链接：https://blog.csdn.net/zwhfyy/article/details/106418495

版权

quasar 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

内容居中写法：

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>