xianniu-ui 0.7.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {

package/packages/description/index.js

@@ -0,0 +1,7 @@
+import XnDescription from './main.vue'
+
+XnDescription.install = function (Vue) {
+  Vue.component(XnDescription.name, XnDescription)
+}
+
+export default XnDescription

package/packages/description/main.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="xn-desc" :class="{ 'xn-desc-border': border }">
+    <div
+      v-if="title || $slots.more"
+      class="xn-desc-header flex justify-content-between align-items-center"
+    >
+      <h1 v-if="title" class="xn-desc-title" v-html="title" />
+      <div class="xn-desc__more" v-if="$slots.more">
+        <slot name="more"></slot>
+      </div>
+    </div>
+    <slot name="title" />
+    <el-row class="xn-desc__row" :style="bodyStyle">
+      <slot />
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XnDescription",
+  provide() {
+    return {
+      labelWidth: this.labelWidth,
+      column: this.column,
+      span: this.span,
+      size: this.size,
+      middle: this.middle,
+      colon:this.colon
+    };
+  },
+  props: {
+    // // 数据源，监听数据重绘
+    // 标题
+    title: {
+      type: String,
+      default: "",
+    },
+    colon:{
+      type:Boolean,
+      default:true
+    },
+    border: Boolean,
+    // 边距
+    // margin: {
+    //   type: String,
+    //   default: "0",
+    // },
+    // label宽度
+    labelWidth: {
+      type: String,
+      default: "80px",
+    },
+    column: {
+      // 每行显示的项目个数
+      type: [Number, String],
+      default: 3,
+    },
+    span: {
+      // 每行显示的项目个数
+      type: [Number, String],
+      default: 3,
+    },
+    size: {
+      // 大小
+      type: String,
+      default: "",
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "20px",
+        };
+      },
+    },
+    middle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+   
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+
+</style>

package/packages/descriptionItem/index.js

@@ -0,0 +1,7 @@
+import XnDescriptionItem from './main.vue'
+
+XnDescriptionItem.install = function (Vue) {
+  Vue.component(XnDescriptionItem.name, XnDescriptionItem)
+}
+
+export default XnDescriptionItem

package/packages/descriptionItem/main.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-col :span="computedSpan" class="xn-desc-item">
+    <div class="xn-desc-item__content" :class="size">
+      <label
+        class="xn-desc-item__label"
+        :class="{ 'has-colon': colon }"
+        :style="{ width: labelWidth, ...middleStyl }"
+        v-html="label"
+      />
+      <div class="xn-desc-item__value" :style="middleStyl">
+        <slot></slot>
+      </div>
+    </div>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: "XnDescriptionItem",
+  inject: ["labelWidth", "column", "size", "middle",'colon'],
+  props: {
+    span: {
+      type: [Number, String],
+      required: false,
+      default: 0,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      // 子组件自己的span
+      selfSpan: 0,
+    };
+  },
+  computed: {
+    middleStyl() {
+      return this.middle
+        ? {
+            "align-items": "center",
+          }
+        : {};
+    },
+    isTrue() {
+      return JSON.stringify(this.$slots) === "{}";
+    },
+    computedSpan() {
+      // 子组件自己的span，用于父组件计算修改span
+      if (this.selfSpan) {
+        return (24 / this.column) * this.selfSpan;
+      } else if (this.span) {
+        // props传递的span
+        return (24 / this.column) * this.span;
+      } else {
+        // 未传递span时，取column
+        return 24 / this.column;
+      }
+    },
+  },
+};
+</script>
+

package/packages/style/src/description.scss

@@ -0,0 +1,86 @@
+.xn-desc {
+    & + & {
+        margin-top: 20px;
+    }
+    width: 100%;
+    background-color: #fff;
+
+    &-header {
+        padding: 10px 20px;
+        display: flex;
+        border-bottom: 1px solid #e8eaec;
+    }
+    &-border {
+        border: 1px solid #e6ebf5;
+        border-radius: 4px;
+    }
+    &-title {
+        margin: 0;
+        color: #ff745c;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 1.5715;
+    }
+    &__row {
+        display: flex;
+        flex-wrap: wrap;
+        border-radius: 2px;
+        width: 100%;
+        & > :not([class*="xn-desc-item"]) {
+            width: 100%;
+        }
+    }
+}
+.xn-desc-item {
+    margin: 10px 0;
+    &__content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      line-height: 1.5;
+      width: 100%;
+      height: 100%;
+  
+      &.small {
+        .xn-desc-item__label,
+        .xn-desc-item__value {
+          padding: 10px 14px;
+        }
+      }
+    }
+    &__label {
+      text-align: right;
+      display: inline-block;
+      flex-grow: 0;
+      flex-shrink: 0;
+      color: #909097;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 1.5;
+      height: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+      margin: 0 10px 0 0;
+      &.has-colon::after {
+        content: ":";
+        position: relative;
+        top: -1.5px;
+      }
+    }
+    &__value {
+      flex-grow: 1;
+      overflow: hidden;
+      word-break: break-all;
+      height: 100%;
+      display: flex;
+      align-items: flex-start;
+      color: #202131;
+      
+      span {
+        color: #aaa;
+      }
+    }
+  }

package/packages/style/src/index.scss

@@ -13,6 +13,7 @@
 @import './tag.scss';
 @import './ellipsis.scss';
 @import './card.scss';
+@import './description.scss';
 
 
 

package/src/index.js

@@ -16,6 +16,8 @@ import XnEmpty from '../packages/empty/index'
 import XnTag from '../packages/tag/index'
 import XnEllipsis from '../packages/ellipsis/index'
 import XnCard from '../packages/card/index'
+import XnDescription from '../packages/description/index'
+import XnDescriptionItem from '../packages/descriptionItem/index'
 
 import Utils from 'xn-ui/src/utils/index'
 const doc = 'http://lzwr.gitee.io/xn-ui/#/'
@@ -36,7 +38,9 @@ const components = [
     XnEmpty,
     XnTag,
     XnEllipsis,
-    XnCard
+    XnCard,
+    XnDescription,
+    XnDescriptionItem
 ]
 const version = require('../package.json').version
 const install = function (Vue) {