sone-ui-component-3.2.4 2.1.41 → 2.1.43

package/package.json

@@ -1,6 +1,6 @@
   {
   "name": "sone-ui-component-3.2.4",
-  "version": "2.1.41",
+  "version": "2.1.43",
   "private": false,
   "main": "lib/sone-ui.common.js",
   "files": [

package/packages/tree/src/main.vue

@@ -8,6 +8,12 @@
   <div style="height:100%;" >
     <!-- 展示类型 -->
     <div class="sone-tree" v-if="type === 'normal'">
+    <div v-if="lineDirection === 'left'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
+      <div class="show-line-box" @click="onShow(2)">
+        <img v-show="show" :src="leftImg"/>
+        <img v-show="!show" :src="rightImg"/>
+      </div>
+    </div>
     <div class="tree-wrap" ref="menu" v-show="show" :style="'width:' + defaultWidth + 'px'">
       <div class="sone-tree-title">
         <el-select v-if="treeData.length>1" v-model="checkedTreeData" @change="changeTreeData" class="sone-tree-components-class">
@@ -55,12 +61,21 @@
         </el-tree>
       </div>
     </div>
-    <div class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-      <div class="show-line-box" @click="onShow" :style="showStyle"></div>
+    <div v-if="lineDirection === 'right'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
+      <div class="show-line-box" @click="onShow(1)">
+        <img v-show="show" :src="leftImg"/>
+        <img v-show="!show" :src="rightImg"/>
+      </div>
     </div>
     </div>
     <!-- 操作类型 -->
     <div class="sone-tree" v-else >
+      <div v-if="lineDirection === 'left'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
+        <div class="show-line-box" @click="onShow(2)">
+          <img v-show="show" :src="leftImg"/>
+          <img v-show="!show" :src="rightImg"/>
+        </div>
+      </div>
       <div class="tree-wrap" ref="menu" v-show="show" :style="'width:' + defaultWidth + 'px'" >
         <div class="sone-tree-title">
           <span>{{ handleTypeTitle }}</span>
@@ -150,8 +165,11 @@
         
 
       </div>
-      <div class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
-        <div class="show-line-box" @click="onShow" :style="showStyle"></div>
+      <div v-if="lineDirection === 'right'" class="show-line" :style="dragWidth?'cursor:col-resize;':''" ref='line'>
+        <div class="show-line-box" @click="onShow(1)">
+          <img v-show="show" :src="leftImg"/>
+          <img v-show="!show" :src="rightImg"/>
+        </div>
       </div>
     </div>
   </div>
@@ -159,6 +177,8 @@
 
 <script>
 // import { deepClone } from '../../../../src/utils/util';
+import leftImg from "../img/left.png"
+import rightImg from "../img/right.png"
 export const getObjType = obj => {
   var toString = Object.prototype.toString
   var map = {
@@ -266,12 +286,20 @@ export default {
       type:Boolean,
       default:true,
       remark:"handle模式下是否展示label"
+    },
+    lineDirection:{
+      type: String,
+      default:'right',
+      remark:"折叠线方向"
     }
   },
   data() {
     return {
+      leftImg,
+      rightImg,
       show: true,
       showStyle: "border-right: 6px solid #019bee;transform: translate(-100%,-50%)",
+      showStyle2: "border-left: 6px solid #019bee;transform: translate(0,-50%)",
       filterText: "",
 
       // normal
@@ -425,13 +453,21 @@ export default {
     handleNodeCollapse(obj, node, self) {
       this.$emit("node-collapse", obj, node, self);
     },
-    onShow() {
+    onShow(direct) {
       this.show = !this.show;
-      this.show
-        ? (this.showStyle =
-            "border-right: 6px solid #019bee;transform: translate(-100%,-50%)")
-        : (this.showStyle =
-            "border-left: 6px solid #019bee;transform: translate(0,-50%)");
+      if(direct === 1) {
+        this.show
+          ? (this.showStyle =
+              "border-right: 6px solid #019bee;transform: translate(-100%,-50%)")
+          : (this.showStyle =
+              "border-left: 6px solid #019bee;transform: translate(0,-50%)");
+      }else {
+        this.show
+          ? (this.showStyle2 =
+              "border-left: 6px solid #019bee;transform: translate(0,-50%)")
+          : (this.showStyle2 =
+              "border-right: 6px solid #019bee;transform: translate(-100%,-50%)");
+      }
       this.$emit('handleDisplay',this.show)
     },
     handleDragEnd(draggingNode, dropNode, dropType, ev) {

package/src/index.js

@@ -57,7 +57,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.1.41',
+  version: '2.1.43',
   locale: locale.use,
   i18n: locale.i18n,
   install,

package/src/styles/form.scss

@@ -191,8 +191,8 @@
   
   .more-line {
     width: 100%;
-    height: 8px;
-    border-top: 1px solid #009bee;
+    height: 14px;
+    // border-top: 1px solid #009bee;
     background: #fff;
     cursor: pointer;
     position: absolute;
@@ -201,8 +201,11 @@
   }
   .more-line::before {
     content: "";
-    border: 6px solid transparent;
-    border-top-color: #009bee;
+    // border: 6px solid transparent;
+    // border-top-color: #009bee;
+    width: 28px;
+    height: 14px;
+    background-image:url('../assets/img/down.png');
     position: absolute;
     left: calc(50% - 5px);
     top: 0px;
@@ -210,14 +213,17 @@
   }
   .more-collapse{
     border-top: none !important;
-    border-bottom: 1px solid #009bee;
+    // border-bottom: 1px solid #009bee;
     background: unset;
     position: sticky;
   }
   .more-collapse::before {
     content: "";
-    border: 6px solid transparent;
-    border-bottom-color: #009bee;
+    // border: 6px solid transparent;
+    // border-bottom-color: #009bee;
+    width: 28px;
+    height: 14px;
+    background-image:url('../assets/img/up.png');
     position: absolute;
     z-index: 10;
     left: calc(50% - 5px);

package/src/styles/tree.scss

@@ -76,14 +76,18 @@
     .show-line{
         position: relative;
         height: 100%;
-        border-right:1px solid #019bee;
+        border-right:1px solid #fff;
+        width: 18px;
+        background: #fff;
+        box-shadow: 10px 0 5px -3px rgba(0, 0, 0, 0.12);
         .show-line-box{
+            border: 1px solid red;
             width: 0;
             height: 0;
             cursor: pointer;
             border: 6px solid transparent;
             position: absolute;
-            top: 50%;
+            top: 49%;
         }
     }
 }

package/Notice.md

@@ -1,106 +0,0 @@
-# sone-ui-component
-
-## Sone UI 组件开发文档
-
-## 基本介绍
-
-### 开发说明
-
-1. 安装依赖
-
-``` bash
-npm i
-```
-
-### 脚手架
-  - [Vue-cli3.x](https://cli.vuejs.org/zh/)
-
-### 主要框架和库
-  - 核心：[Vue2.x](https://cn.vuejs.org/v2/guide/)
-  - 打包：[webpack4.x](https://webpack.js.org/concepts/)
-  - UI库：[element-ui](https://element.eleme.cn/#/zh-CN/guide/design)
-  
-### 主要目录结构
-
-``` bash
-    ├─build           构建配置文件
-    ├─docs            组件的文档项目
-    ├─demo            组件的本地测试
-    ├─lib             组件UMD打包的目录
-    ├─packages        组件定义目录
-    ├─public          公共目录
-    └─src             组件引用的目录
-```
-
-## 运行指令说明
-
-### 在定义好组件后，运行以下命令生成组件被使用的入口文件，用于组件注册和单独引入
-
-``` bash
-npm run build:file
-```
-
-### 组件打包成UMD
-
-``` bash
-npm run lib
-```
-
-### 组件库在发布之前，最好运行，以保证最新的组件入口文件和UMD生成
-
-``` bash
-npm run publish:pre
-```
-
-### 在定义好组件后维护组件文档，想要在组件的文档（markdown）中使用组件做示例时，使用以下命令，自动在vuepress 生成定义好的组件文件[慎用！！！]
-
-``` bash
-npm run build:docs
-```
-
-[慎用！！！]：此操作会覆盖原有的组件文件，可能会出现对象未定义（nodejs）
-
-### 本地启动组件的文档项目
-
-``` bash
-npm run docs:dev
-```
-
-### 组件的文档项目打包
-
-``` bash
-npm run docs:build
-```
-
-### 本地组件测试：在demo文件夹的App.vue,使用你想要查看效果的组件
-
-``` bash
-npm run dev:demo
-```
-
-## 主要流程
-
-### 定义组件
-
-1. 在`src`文件夹下，定义组件；
-2. 在`components.json`文件中，维护好组件的地址；
-3. 运行`npm run build:file`, 生成组件的入口文件；
-
-### 测试组件效果
-
-定义组件后，测试组件
-
-1. 在`demo`文件夹下的`*.vue`，书写相关组件的测试代码；
-2. 运行`npm run dev:demo`，查看效果；
-
-### 组件文档维护
-
-1. 当有新的组件定义，就需要运行`npm run build:docs`, 将组件复制到docs项目内部；
-2. 在`docs`文件夹的`components`文件夹内，维护组件markdown文件；
-3. 在`docs`文件夹的`.vuepress`的`config.js`内，定义组件的导航路径；
-4. 运行`npm run docs:dev`，查看效果；
-
-## 参考
-
-[element](https://github.com/ElemeFE/element)
-[vuepress](https://www.vuepress.cn/guide/directory-structure.html)