0.1.27 • Published 4 years ago

jzd-ui v0.1.27

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

引入 jzd-ui

安装依赖包

yarn add jzd-ui -S 或 npm i jzd-ui -S

页面引入

找到项目中 main.js,增加以下代码
import JzdUI from 'jzd-ui'
import 'jzd-ui/lib/jzd-ui.css'
Vue.use(JzdUI)
页面中直接引用标签即可，如
<jzd-tree></jzd-tree>

各个组件使用栗子

jzd-tree

标签　　

<jzd-tree ref="publicTree" :data="xsmcData" :type="type" :input-width="inputWidth" :select-width="selectWidth" :defult-show="defultShow" ></jzd-tree>

配置项

    data() {
      return {
      type: "select", //checkbox,select,radio三种可选类型
      inputWidth: "600px",
      selectWidth: "400px",
      inputSize:'small',
      defultShow: {
        lable: "后湖派出所任务",
        value: 11
      },
      xsmcData: [
        {
          id: 1,
          pId: 0,
          name: "江岸区分局任务",
          pyName: "jaqfjrw",
          open: true
        },
        { id: 11, pId: 1, name: "后湖派出所任务", pyName: "hhpcsrw" }
      ]
    }
1. type:tree类型，checkbox，select,radio
2. inputWidth:输入框的宽度
3. selectWidth:下拉框的宽度
4. defultShow:初始默认显示值
5. data：数据源
6.inputSize:输入框大小

方法

clearInput()
清除输入框的值 this.$refs["publicTree"].ClearInput();
getLableName()
获取输入框显示名
this.$refs["publicTree"].getLableName();
getLableValue()
获取输入框真实值(id)
this.$refs["publicTree"].getLableValue();

jzd-window

标签　　

<jzd-window ref="kwindow" :actions="actions" :animation="animation" :appendTo="appendTo" :autoFocus="autoFocus" :content="content" :draggable="draggable" :iframe="iframe" :height="height" :maxHeight="maxHeight" :maxWidth="maxWidth" :minHeight="minHeight" :minWidth="minWidth" :modal="modal" :pinned="pinned" :position="position" :resizable="resizable" :scrollable="scrollable" :title="title" :visible="visible" :width="width" :size="size" @activate="activate" @close="close" @deactivate="deactivate" @dragend="dragend" @dragstart="dragstart" @error="error" @maximize="maximize" @minimize="minimize" @open="open" @refresh="refresh" @resize="resize"> </jzd-window>

配置项

   data() {
    return {
     actions:['Minimize','Maximize','Close'],
     animation:{close: {effects: "fade:out"}},
     modal:true,
     width:"80%",
     height:"90%",
     visible:false,
     title:"标题"
    }
1. actions Array (default: ["Close"])
  用于与Window交互的按钮,预定义的数组值为：
    Close,Refresh,Minimize,Maximize,
2. animation Boolean|Object
  {Animation}对象的集合，用于更改默认动画。 设置为false时，将禁用所有动画。
  注意：没有 animation: true
animation: false;
    2.1 animation.close Object
       窗口关闭时将使用的动画。
animation: {
  close: false;
}
    2.2 animation.close.effects String
        弹出窗口关闭时将使用的效果。
animation: {
  close: {
    effects: "fade:out";
  }
}
    2.3 animation.close.duration Number
       定义结束动画的持续时间。
animation: {
  close: {
    duration: 2000;
  }
}
   2.4 animation.open Object
       窗口打开时将使用的动画。
   animation: {
    open: false
  },
   2.5 animation.open.effects String
     弹出窗口打开时将使用的效果。
animation: {
  open: {
    effects: "fade:in";
  }
}
   2.6 animation.open.effects String
      定义打开动画的持续时间。
  animation: {
    open: {
      duration: 100
    }
  },
3. appendTo Object|String (default: document.body)
  Window将附加到的元素。将窗口与不限制窗口在特定元素内的拖动的形式一起使用是有益的。对于此类方案，请使用draggable.containment设置。
  注意：将窗口追加到使用overflow：hidden，overflow：auto或overflow：scroll设置样式的元素可能会导致意外行为，因为Window不会显示在元素边界之外。也可能出现不需要的滚动条。
appendTo: "form#mainForm";
4. autoFocus Boolean (default: true)
 确定打开时窗口是否会自动聚焦。 单击已打开的窗口时，该属性还会影响焦点行为。
autoFocus: false;
5. content Object|String
 指定Window将加载其内容的URL或请求选项。
 注意:对于以协议开头的URL（例如，http：//），将自动创建容器iframe元素。由于此行为可能会在将来的版本中更改，请尝试始终使用iframe配置选项。
content: "/details";
      5.1 content.template String
    窗口内容的模板。从服务器返回的数据将作为此模板的数据给出。如果返回的数据是JSON，则必须传递dataType参数，以便jQuery解析数据。如果URL包含协议，请将iframe设置为false。否则，JSON响应将按原样注入Window的内容区域。
  content: {
    url: "/userDetails",
    dataType: "json",
    iframe: false,
    template: "User name: #= data.username #"
  }
6. content Object|String
   启用（true）或禁用（false）拖动窗口小部件。
   draggable: {
    containment: "#container",
    axis: "x",
    dragHandle: "#handle"
  }
   6.1 draggable.containment String|Element|jQuery default: ""
  定义窗口可以移动的元素。该窗口将附加到此元素，并以这种方式覆盖appendTo选项。接受选择器或元素。
  注意：必须定位包含元素，也就是说，其CSS位置属性必须设置为相对，绝对或固定。
#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid grey;
}
  width: "300px",
  height: "200px",
  draggable: {
    containment: "#container"
  }
   6.2 draggable.axis String default: ""
 约束拖动到水平（x）或垂直（y）轴。
支持的值是：x y
draggable: {
  axis: "x";
}
   6.3 draggable.dragHandle String default: ".k-window-titlebar"
限制窗口通过指定元素的拖动，该元素将成为窗口内容的一部分。接受选择器或元素。
draggable: {
  dragHandle: "#handle";
}
 7. iframe Boolean
  明确说明是否将创建内容iframe。有关更多信息，请参阅有关使用iframe(https://docs.telerik.com/kendo-ui/controls/layout/window/overview#using-iframes)的文档。
    content: "http://www.baidu.com/",
    iframe: true
 8. height Number | String
  指定窗口的高度。
height: 400;
height: "50%";
 9. maxHeight Number (default: Infinity)
 通过调整窗口大小可以实现的最大高度（以像素为单位）。
maxHeight: 300;
 10. maxWidth Number (default: Infinity)
 通过调整窗口大小可以实现的最大宽度（以像素为单位）。
   maxWidth: 300
 11.minHeight Number (default: 50)
 通过调整窗口大小可以实现的最小高度（以像素为单位）。
   minHeight: 100
12.minWidth Number (default: 50)
通过调整窗口大小可以实现的最小宽度（以像素为单位）。
     minWidth: 100
13.modal Boolean|Object (default: false)
 指定窗口是否在页面上显示模式覆盖。
    modal: true
   13.1 modal.preventScroll Boolean (default: false)
指定在打开模式对话框时文档是否将停止滚动。 关闭模式对话框必须恢复初始文档溢出。 modal.preventScroll设置将修改文档的溢出规则，因此不能与包含选项一起使用。
注意：不支持具有不同preventScroll设置的多个窗口。
modal: {
  preventScroll: true;
}
14.pinned Boolean (default: false)
指定是否固定窗口，即在滚动期间它不会与页面内容一起移动。
  pinned: true,
  position: { top: 100 }
15.position Object
一个或两个成员的集合，用于定义窗口的初始顶部和/或左侧位置或页面上包含元素的位置。
 position: {
    top: 100, // or "100px"
    left: "20%"
  }
    15.1 position.top Number|String
       指定窗口的初始顶部位置。数值被视为像素。字符串值可以指定像素，百分比，ems或其他有效值。

    15.2 position.left Number|String
       指定窗口的初始左侧位置。数值被视为像素。字符串值可以指定像素，百分比，ems或其他有效值。


16.  resizable Boolean (default: true)
     启用（true）或禁用（false）调整Window的大小。
resizable: false
17. scrollable Boolean (default: true)
   启用（true）或禁用（false）滚动Window内容。
 scrollable: false
18. title Object|String|Boolean default: ""
窗口标题栏中的文本。如果设置为false，则将显示没有标题栏的窗口。
注意：窗口的标题栏按钮将不会显示。除非配置了dragHandle，否则将阻止Window拖动。
 title: "标题"
  title: false
 18.1 title.text String default: ""
 窗口标题栏中的文本。
  title: {
    text: "标题"
  }
 18.2 title.encoded Boolean default: true
  指定是否对标题文本进行编码。
   title: {
    text: "<b>标题</b>",
    encoded: false
  }
19. visible Boolean (default: true)
 指定Window最初是否可见。
    visible: false
20.width Number | String
指定窗口的宽度。
 width:400
 width: "50%"
21.size String (default: "auto")
为Window设置预定义大小。宽度和高度配置选项覆盖预定义的大小。支持的值是：auto small medium large
 size: "wide"

方法

调所有的方法之前先要获取 window 对象的实例，方法都在实例上

    1. 获取jzd-windows实例
const kendoWidget = this.$refs["kWindow"].kendoWidget();
   2.center()
   将窗口置于视口中心.
   如果Window没有设置维度并且在其内容加载Ajax之前居中，则可能在加载内容后调整大小。这将更改窗口小部件在屏幕上的位置，并且不再居中。如果需要使窗口居中，则将其置于刷新事件中心或设置显式尺寸。
const kendoWidget = this.$refs["kWindow"].kendoWidget();
kendoWidget.center().open();
   3.close()
    关闭窗口。

   4.content()
    获取或设置Window的内容。当用作setter时，支持链接。

   5.destroy()
   销毁窗口及其模态叠加。 从DOM中删除窗口小部件的HTML元素。

   6.isMaximized()
    窗口是否已最大化。

   7.isMinimized()
    窗口是否已最小化。

   8.maximize()
   最大化窗口。 触发resize事件。

   9.minimize()
   最小化窗口。 触发resize事件。

   10.open()
   打开一个窗口，通过内部调用toFront将其置于任何其他打开的Window实例之上。

   11.pin()
   将窗口固定到其当前位置，其位置为：固定样式，即，当滚动页面时，窗口小部件与其他页面内容一起停止移动。 用户仍然可以使用鼠标或键盘移动窗口。

   12.refresh()
   从远程URL或最初定义的内容模板刷新Window的内容。

   options Object|String
   从服务器请求数据的选项。 如果省略，则Window使用创建Window时提供的content属性。 任何指定的选项都将传递给jQuery.ajax（）。
   options.url String
   将请求的服务器URL。
   options.cache Boolean
   指示Ajax请求是否可以使用先前缓存的响应。 默认情况下，不使用Ajax请求缓存。
   options.data Object
   一个JSON对象，包含将传递给服务器的数据。
   options.type String
   HTTP请求方法（GET，POST）。
   options.template String
   用于显示请求数据的模板。
   options.iframe Boolean
   指示是在iframe内还是使用AJAX获取内容，并在同一页面上呈现内容。
const kendoWidget = this.$refs["kWindow"].kendoWidget();
kendoWidget.refresh("/feedbackForm");

kendoWidget.refresh({
  url: "/feedbackForm",
  data: { userId: 42 }
});

kendoWidget.refresh({
  url: "/userInfo", // returns JSON, { firstName: "Alyx", lastName: "Vance" }
  data: { userId: 42 },
  dataType: "json",
  template: "Hello, #= firstName # #= lastName #"
});
   13.restore()
     将最大化或最小化窗口恢复为其先前状态。 触发resize事件。

   14.setOptions()
   允许使用新选项配置窗口。
   如果您更改了内容网址，请稍后再刷新。 另一种选择是使用新 URL 直接执行 refresh 方法。仅当窗口小部件未最大化或最小化时，才可以更改窗口的大小或位置。
const kendoWidget = this.$refs["kWindow"].kendoWidget();
kendoWidget.setOptions({
  width: 180,
  height: 225
});
   15.title()
   获取或设置窗口的标题。 当用作setter时，支持链接。

   16.toFront()
      增加Window包装器的z-index样式，使实例位于其他打开的Windows之上。 使用open方法时会自动执行此方法。

   17.toggleMaximization()
    在最大化状态和恢复状态之间切换窗口。 触发resize事件。

   18.unpin()
     禁用窗口的固定状态，以便在滚动页面时窗口小部件将与其他页面内容一起移动。

事件

1.activate       
   Window完成打开动画时触发。
2.close  
   当用户或通过close（）方法关闭Window时触发。

3.deactivate 
   Window完成关闭动画时触发。

4.dragend  
  用户移动窗口后触发。 

5.dragstart 
  当用户开始移动窗口时触发。

6.error 
  当Ajax内容请求失败时触发。

7.maximize  
  当用户最大化窗口时触发。

8.minimize 
当用户最小化窗口时触发。

9.open  
打开Window时触发，即调用open（）方法时触发。

10.refresh 
当Window的内容通过Ajax完成加载，Window iframe完成加载，或者在具有静态内容的Window上单击Refresh按钮时触发。

11.resize   
用户调整窗口大小时触发。

参考详细文档地址

core-jsvuevue-router
@infinitebrahmanuniverse/nolb-jz@everything-registry/sub-chunk-1998@zalastax/nolb-jz
0.1.27

4 years ago

0.1.24

4 years ago