🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →

jtaro-ui

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jtaro-ui

为JTaro定做的UI库，依赖JRoll，但不依赖JTaro

latest

Source

npm

Version: 0.0.12

Version published: 6 years ago

Weekly downloads: 27

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

JTaro UI

为JTaro定做的UI库，依赖JRoll，但不依赖JTaro

先睹为快

http://www.chjtx.com/JTaro-UI/build/

开始使用

一个比较通用的index.html模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>JTaro UI</title>
    <link rel="stylesheet" href="./src/jtaro-ui.css">
    <link rel="stylesheet" href="./src/jtaro-ui-iconfont.css">
    <link rel="stylesheet" id="jtaro_ui_theme" href="./src/jtaro-ui-theme-default.css">
    <script src="./node_modules/jtaro-module/src/client.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/jroll/src/jroll.js"></script>
    <script src="./src/jtaro-ui.js"></script>
</head>
<body>
    <div id="jtaro_app"></div>
    <script src="./node_modules/jtaro/dist/jtaro.js"></script>
    <script>
       Vue.use(JTaro, {
           default: 'pages/home'
       })
    </script>
</body>
</html>

jtaro-ui.js依赖JRoll，因此需要放在jroll.js后面

主题颜色

参考 material design color

复制src/jtaro-ui-theme-default.css，将里面的主题颜色修改成自己的颜色

动态修改主题，只需要将主题样式的link的href修改为自己主题样式文件的路径

document.getElementById('jtaro_ui_theme').href = './jtaro-ui-theme-yours.css'

字体图标

到阿里巴巴矢量图标库下载图标

修改src/jtaro-ui-iconfont.css里的字体图标内容，例：

.j-icon-menu:before { content: "\e601"; }
.j-icon-github:before { content: "\e6c5"; }

与阿里图标库写法有点区别

/* icon */
[class*="j-icon-"],
.j-icon {
    font-family: "jtaro-ui" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

JTaro UI 使用了[class*="j-icon-"]对字体进行定义，因此只需要一个class

<!-- 阿里图标库调用示例 -->
<i class="icon-font icon-font-xxx"></i>

<!-- JTaro UI 调用示例 -->
<i class="j-icon-xxx"></i>

栅格

分12列和10列两类，j-row-[10/12]表示行，j-col-[1-10/1-12]表示列

<!-- 10 列 -->
<div class="j-row-10">
  <div class="j-col-1"></div>
  <div class="j-col-2"></div>
  <div class="j-col-3"></div>
  <div class="j-col-4"></div>
</div>

<!-- 12 列 -->
<div class="j-row-12">
  <div class="j-col-3"></div>
  <div class="j-col-4"></div>
  <div class="j-col-5"></div>
</div>

点击涟漪效果

添加.j-click-button样式类，普通效果，扩散点在点击位置

添加.j-click-round-button样式类，圆形按钮效果，扩散点在元素中心

组件

j-appbar

<j-appbar title="居中标题">
  <j-button slot="left">菜单</j-button>
  <j-button slot="right">消息</j-button>
</j-appbar>

j-button

<j-button @action="bindMethodByYourself" width="42" height="42" type="theme" round>按钮</j-button>

属性

名称	默认值	说明
@action		父作用域methods里的一个方法，点击该按钮时触发
width	auto	按钮宽度
height	36px	按钮高度
type		按钮类型，可选: 1、默认普通类型 2、`text` 文本类型 3、`theme` 与主题一致 4、`red` 红 5、`green` 绿 6、`blue` 蓝 7、`yellow` 黄 8、`disabled` 不可用
round	false	是否为圆形按钮，对应`.j-click-round-button`

以上属性都可以使用v-bind动态修改

j-body

自动提供JRoll滑动，默认top:44px，可自行通过style修改

<j-body :options="jrollOptions">
  <div>文章内容</div>
</j-body>

属性

名称	默认值	说明
:options	null	提供给JRoll创建实例时使用的选项
outer-bg		外围div的背景色，即JRoll的wrapper元素的背景色
inner-bg		内围div的背景色，即JRoll的scroller元素的背景色

j-mask

遮罩组件

<j-mask :show="show" @action="bindMethodByYourself">
  <div>自定义内容</div>
</j-mask>

属性

名称	默认值	说明
@action	null	点击遮罩触发的动作
:show	false	是否显示

j-sidebar

<j-sidebar :show="show" @action="toggleSideBar" side="right">
  <div>内容</div>
</j-sidebar>

属性

名称	默认值	说明
@action	null	点击遮罩触发的动作
:show	false	是否显示
side	left	在哪边显示，左或右，可选`left`、`right`
width	80%	宽度
bg	#FFF	背景色

j-dialog

<j-dialog :show="show" @action="clickDialog" :buttons="buttons">
  <div slot="title">弹窗标题</div>
  <div slot="content">对话框内容对话框内容对话框内容对话框内容对话框内容</div>
</j-dialog>

属性

名称	默认值	说明
@action	null	点击按钮或遮罩触发的动作，按钮的索引值（从0开始）传进该动作方法，如果点击的是遮罩，则为`-1`
:show	false	是否显示
:buttons	[]	按钮，最多允许三个，例：`['取消', '确定']`

Toast

import Toast from './components/toast.js'

// 默认2000ms后自动消失
new Toast('默认2秒后消失')

// 设置1000ms后自动消失
new Toast('默认2秒后消失', 1000)

// 第二个参数为-1时不会自动消失
var toast = new Toast('不会自动消失', -1)

// 调用destroy方法手动消灭它
toast.destroy()

Loader

import Loader from './components/loader.js'

// 默认用法：
var loader = new Loader();

//可选参数（以下为默认值）
var loader = new Loader({
  "autoShow" : true,  //马上显示
  "target" : document.body, //在哪个dom里显示
  "text" : '载入中，请稍候...',  //显示的文字
  "cancel" : null,  //关闭按钮，为null时不显示，为function时显示，点击关闭即执行function
  "color" : 'rgba(255, 255, 255, 1)', //文本颜色
  "boxBg" : 'rgba(0, 0, 0, .75)', //loading框颜色
  "wrapBg": 'rgba(0, 0, 0, .2)',  //背景颜色
  "zIndex": 9999  //z-index属性
});

/* 提供三个方法
1、显示 loader.show();
2、隐藏 loader.hide();
3、销毁 loader.destroy();
*/

j-input

默认宽度为100%

<j-input v-model="value" placeholder="提示文字" label="多行输入"
  rows="3" rowsMax="6" labelFloat multiLine disabled
  @input="inputEvent"
  @change="changeEvent"
  @focus="focusEvent"
  @blur="blurEvent"/>

j-switch

<j-switch label="开关" v-model="value" disabled labelLeft/>

j-select

支持单选、多选、可省略value

multiple 为多选标记，多选时value为数组，请保证数组里每一项都为字符串

<!-- 单选 -->
<j-select v-model="value">
  <j-option value="1">选项一</j-option>
  <j-option value="2">选项二</j-option>
  <j-option value="3">选项三</j-option>
</j-select>

<script>
  return {
    value: '1'
  }
</script>

<!-- 多选 -->
<j-select v-model="value" multiple>
  <j-option value="1">选项一</j-option>
  <j-option value="2">选项二</j-option>
  <j-option value="3">选项三</j-option>
</j-select>

<script>
  return {
    value: ['1']
  }
</script>

省略value

<j-select v-model="value">
  <j-option>选项一</j-option>
  <j-option>选项二</j-option>
  <j-option>选项三</j-option>
</j-select>

j-radio

相同v-model为一组

v-model的值为字符串

<j-radio label="选项 1" v-model="value" val="1" disabled/>
<j-radio label="选项 2" v-model="value" val="2" />

j-checkbox

相同v-model为一组

v-model的值为数组，数组元素为字符串

<j-checkbox label="选项 1" v-model="value" val="1" disabled/>
<j-checkbox label="选项 2" v-model="value" val="2" />

j-number

加减器

<j-number v-model="value" max="20" min="10" throw-in="#shopping_car"
  @throw-callback="addShoppingCar" @plus="plus" @minus="minus"
  @calculate="calculate" no-calculate/>

<script>
export default {
  methods: {
    plus() {

    },
    minus() {
    
    },
    calculate(value) {

    },
    addShoppingCar() {

    }
  }
}
</script>

属性

名称	默认值	必填	说明
v-model	--	Y	相当于表单的value，不能为空数组
max	99	N	最大值
min	0	N	最小值
no-calculate	false	N	设为`true`将不能调出计数器
type	0	N	按钮主题： `0` 圆形，默认 `1` 圆角矩形
throw-in	--	N	小圆点投进的目标（购物车），可以是字符串或dom元素
@throw-callback	--	N	小圆点投进购物车后的回调
@plus	--	N	点击加按钮触发
@minus	--	N	点击减按钮触发
@calculate	--	N	在计数器输入值时触发

j-picker

属性

名称	默认值	必填	说明
v-model	--	Y	相当于表单的value，不能为空数组
:val	--	Y	数据
:number	--	Y	要显示的列数
show	false	N	是否默认显示选择器

<j-picker v-model="value" :val="address" :number="3"/>{{value[0] + '/' + value[1] + '/' + value[2]}}</j-picker>

<script>
export default {
  data: function () {
    return {
      value: ['广东', '广州', '天河'],
      address: [{
        name: '广东',
        children: [{
          name: '广州',
          children: [{
            name: '天河'
          }]
        }]
      }]
    }
  }
}
</script>

j-slider

<j-slider v-model="value" max="10"/>

<j-slider v-model="value" disabled/>

j-sheet

<j-sheet @action="fun" :show="show" :menus="menus"/>

export default {
  data: function () {
    return {
      show: false,
      menus: ['操作一', '操作二']
    }
  },
  methods: {
    fun: function (index) {
      switch (index) {
        case -1: this.clickMask()
          break
        case 0: this.action1()
          break
        case 1: this.action2()
      }
    },
    clickMask: function () {
      // 点击了遮罩层
    },
    action1: function () {
      // 点击了按钮一
    },
    action2: function () {
      // 点击了按钮一
    }
  }
}

j-datepicker

value的值为字符串，可为空字符串''或yyyy-mm-dd格式的字符串，例：2017-07-13

yyyy的值最小为1950，最大为2050

<j-datepicker v-model="value" />

j-timepicker

<j-timepicker v-model="value" />

下拉刷新

https://github.com/chjtx/JRoll/tree/master/extends/jroll-pulldown

上拉加载

https://github.com/chjtx/JRoll/tree/master/extends/jroll-vue-infinite

Keywords

jtaro-ui

FAQs

What is jtaro-ui?

Is jtaro-ui popular?

Is jtaro-ui well maintained?

Package last updated on 11 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

jtaro-ui

JTaro UI

先睹为快

开始使用

主题颜色

字体图标

栅格

点击涟漪效果

组件

j-appbar

j-button

j-body

j-mask

j-sidebar

j-dialog

Toast

Loader

j-input

j-switch

j-select

j-radio

j-checkbox

j-number

j-picker

j-slider

j-sheet

j-datepicker

j-timepicker

下拉刷新

上拉加载

Keywords

Related posts

Introducing Repository Access Permissions and Custom Roles

Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection