xwcxh-ui v1.0.1

xwcxh-ui

Project setup

npm install xwcxh-ui

Quick Start

import Vue from 'vue'
import xwcxh from 'xwcxh-ui'
import 'xwcxh-ui/xwcxh-ui.css'
Vue.use(xwcxh)

示例

<template>
  <div class="">
    <!-- 例1： -->
    <!-- <xwcxh-dialog width="340px" height="421px" :showTitle="showTitle" :btnAbsolute="btnAbsolute" :title="title"
      :dialogVisible="dialogVisible" @cancel="cancel" @isOk="confirm" @close="close">
      <template v-slot:content>
        <img src="../../src/assets/img/1.png" class="xwcxh-dialog-img" alt="">
      </template>
      <template v-slot:closeBtn>
        <button class="closeBtn" @click="closeQX">取消</button>
      </template>
      <template v-slot:confirmBtn>
        <button class="confirmBtn" @click="confirm">确定</button>
      </template>
    </xwcxh-dialog> -->
    <!-- 例2： -->
    <!-- <xwcxhDialog width="300px" height="270px" :showTitle="true" title="话费查询" :btnAbsolute="true"
      :dialogVisible="dialogVisible" @cancel="cancel" @isOk="confirm" @close="close" bg="#fff">
      <template v-slot:content>
        <div class="content">
          尊敬的用户，您好！欢迎使用1008611话费查询直通车，您本次查询的号码为：xxxxxx，查询结果: 无
        </div>
      </template>
      <template v-slot:closeBtn>
        <button class="closeBtn1" @click="closeQX">取消</button>
      </template>
      <template v-slot:confirmBtn>
        <button class="confirmBtn1" @click="confirm">确定</button>
      </template>
    </xwcxhDialog> -->
    <!-- 例3： -->
    <xwcxhDialog width="336px" height="345px" :showTitle="false" :btnAbsolute="true" :title="title"
      :dialogVisible="dialogVisible" @cancel="cancel" @isOk="confirm" @close="close">
      <template v-slot:content>
        <div class="xwcxh-dialog-img">
          <div class="content">尊敬的用户，您好！欢迎使用1008611话费查询直通车，您本次查询的号码为：xxxxxx，查询结果: 无</div>
        </div>
      </template>
      <template v-slot:closeBtn>
        <button class="closeBtn1" @click="closeQX">取消</button>
      </template>
      <template v-slot:confirmBtn>
        <button class="confirmBtn1" @click="confirm">确定</button>
      </template>
    </xwcxhDialog>
  </div>
</template>

<script>
import xwcxhDialog from '@/views/package/xwcxh-dialog.vue'
export default {
  name: 'myHome',
  components: {
    xwcxhDialog
  },
  data() {
    return {
      showTitle: false,
      btnAbsolute: true,
      title: '提示',
      dialogVisible: true
    }
  },
  methods: {
    close() {
      this.dialogVisible = false
    },
    confirm() {
      console.log('confirm')
    },
    cancel() {
      this.dialogVisible = false
    },
    closeQX() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.xwcxh-dialog-img {
  width: 100%;
  height: 100%;
  display: block;
}

.confirmBtn {
  width: 48%;
  height: 100%;
  // background: #409eff;
  background-color: transparent;
  font-size: 0;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-weight: bold;
  outline: none;
}

.closeBtn {
  width: 48%;
  height: 100%;
  // background: #fff;
  background-color: transparent;
  font-size: 0;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-weight: bold;
  outline: none;
  margin: 0 10px;
}

.content {
  padding: 20px;
}

// 例2：
.confirmBtn1,
.closeBtn1 {
  width: 48%;
  height: 100%;
  background: #409eff;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-weight: bold;
  outline: none;
  margin: 0 10px;
}

// 例3：
/deep/ .xwcxh-dialog-footer {
  flex-direction: column;
  height: 120px !important;
  // height: 60px !important;
}

.confirmBtn1,
.closeBtn1 {
  margin-bottom: 10px;
}

.xwcxh-dialog-img {
  background-image: url('../../src/assets/img/dialog.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .content {
    font-size: 16px;
    color: #000;
    text-align: center;
    padding-top: 120px;
  }
}
</style>

API

xwcxh-dialog

xwcxh-dialog-slot