shark 系列精品组件库

dbclick
831 阅读6分钟
原文链接： shark.mail.netease.com

Angular组件库引用方式

1、引入js

方式一：require('@ntesmail/shark-angular'); （你的项目需要支持commonJs打包）

方式二：引用node_modules目录下已打包好的js /node_modules/@ntesmail/shark-angular/build_dist/shark-angular.ui.js

2、引入css

我们推荐您使用 @ntesmail/shark-css shark系列组件库的html/css基石

弹出层组件

modal 组件

配置项：

templateUrl

  • 是否必须：templateUrl 或 template必须有一个
  • 类型：string
  • 默认值：''
  • 说明：弹窗引用的template的url

template

  • 是否必须：templateUrl 或 template必须有一个
  • 类型：string
  • 默认值：''
  • 说明：弹窗的template

controller

  • 是否必须：是
  • 类型：string
  • 默认值：''
  • 说明：controller的名字

size

  • 是否必须：否
  • 类型：string
  • 默认值：''
  • 说明：弹窗尺寸

backdrop

  • 是否必须：否
  • 类型：string
  • 默认值：''
  • 说明：点击背景是否消失，static不消失 | ''消失

resolve

  • 是否必须：否
  • 类型：object
  • 默认值：无
  • 说明：额外传递给弹窗的参数,eg: resolve: { params: function() { return { content: 'I am content' }; } }

内容：我是弹窗内容 修改内容

alert

confirm 

<div ng-controller="DemoModalCtrl">
    <p>
        <b>内容：</b>
        <button class="btn btn-sm btn-info" ng-click="openDialog();">修改内容</button>
    </p>
    <p>
        <button class="btn btn-sm btn-info" ng-click="openAlert();">alert</button>
    </p>
    <p>
        <button class="btn btn-sm btn-info" ng-click="openConfirm();">confirm</button>
    </p>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoModalCtrl', ['$scope', '$sce', 'sharkmodal', function($scope, $sce, sharkmodal) {
        $scope.content = '我是弹窗内容';
        $scope.openDialog = function(size) {
            var modalInstance = sharkmodal.open({
                templateUrl: '/shark-angular/examples/templates/dialog.html',
                // template: `
                //     <div class="modal-header">
                //         <button class="close" ng-click="dismiss()">×</button>
                //         <h4 class="modal-title">
                //             修改内容
                //         </h4>
                //     </div>
                //     <div class="modal-body">
                //         <input type="text" name="content" ng-model="content" />
                //     </div>
                //     <div class="modal-footer">
                //         <button class="btn btn-primary" type="button" ng-click="ok()">确定</button>
                //         <button class="btn btn-warning" type="button" ng-click="dismiss()">取消</button>
                //     </div>
                // `,
                controller: 'DemoDialogCtrl',
                size: 'sm',
                backdrop: '',
                resolve: {
                    params: function() {
                        return {
                            content: $scope.content
                        };
                    }
                }
            });
            modalInstance.then(function(res) {
                console.log('close', res);
                $scope.content = res.content;
            }, function(res) {
                console.log('dismiss', res);
            });
        };
        $scope.openAlert = function() {
            sharkmodal.alert({
                content: '我是alert弹窗'
            }).then(function() {
                console.log('点击了确定');
            }, function() {
                console.log('点击了取消');
            });
        };
        $scope.openConfirm = function() {
            sharkmodal.confirm({
                content: '我是confirm弹窗'
            }).then(function() {
                console.log('点击了确定');
            }, function() {
                console.log('点击了取消');
            });
        };
    }])
    .controller('DemoDialogCtrl', ['$scope', '$sce', 'modalInstance', 'params', function($scope, $sce, modalInstance, params) {
        $scope.content = params.content;
        $scope.dismiss = function() {
            modalInstance.dismiss({
                content: null
            });
        };
        $scope.ok = function() {
            modalInstance.close({
                content: $scope.content
            });
        }
    }]);
</script>

弹出层组件

tooltip 组件

配置项：

tooltip-content

  • 是否必须：tooltip-content 或 tooltip-content-url 必须有一个
  • 类型：string
  • 默认值：''
  • 说明：tooltip内容模板

tooltip-content-url

  • 是否必须：tooltip-content 或 tooltip-content-url 必须有一个
  • 类型：string
  • 默认值：''
  • 说明：tooltip内容模板引用的url

direction

  • 是否必须：否
  • 类型：string
  • 默认值：'right'
  • 说明：优先弹出方向，top right bottom left（如果left/top空间不够，会变为right/bottom）
tooltip 
<div ng-controller="DemoTooltipCtrl">
    <button class="btn btn-sm btn-info" name="tooltip" sharktooltip tooltip-content="'我的电话号码是：<br/>18898033520'" direction="'right'">tooltip</button>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoTooltipCtrl', ['$scope', function($scope) {}]);
</script>

toastr 组件

配置项：

content

  • 是否必须：是
  • 类型：string
  • 默认值：''
  • 说明：提示的内容

duration

  • 是否必须：否
  • 类型：number
  • 默认值：3000（ms）
  • 说明：提示持续时间

成功提示

失败提示 

<div ng-controller="DemoToastrCtrl">
    <p>
        <button class="btn btn-success" ng-click="success();">成功提示</button>
    </p>
    <p>
        <button class="btn btn-danger" ng-click="error();">失败提示</button>
    </p>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoToastrCtrl', ['$scope', 'sharktoastr', function($scope, sharktoastr) {
        $scope.success = function() {
            sharktoastr.success('保存成功！');
        };
        $scope.error = function() {
            sharktoastr.error('保存失败！');
        };
    }]);
</script>

autocomplete 组件

配置项：

filter-data

  • 是否必须：是
  • 类型：function @return [{}]
  • 默认值：无
  • 说明：用户自定义的过滤函数，得到需要展示的列表，建议使用

display-key

  • 是否必须：否
  • 类型：string
  • 默认值：'name'
  • 说明：要展示的字段名

debounce-time

  • 是否必须：否
  • 类型：number
  • 默认值：300
  • 说明：防抖动，间隔300毫秒触发一次数据过滤

autocomplete

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：是否开启鼠标移动或者按下方向键时，将输入框中的内容补全

on-selected

  • 是否必须：否
  • 类型：function
  • 默认值：function(itemData) {}
  • 说明：选中下拉列表中的某一项后的回调函数
请输入邮箱地址： 
<div ng-controller="DemoAutocompleteCtrl">
    请输入邮箱地址：
    <input class="form-control" sharkautocomplete name="autocomplete" ng-model="autocompleteValue" filter-data="filterData" display-key="'name'" autocomplete="false" debounce-time="'0'" on-selected="onSelected" />
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoAutocompleteCtrl', ['$scope', function($scope) {
        var arr = ['163.com', '163.vip.com', 'qq.com', 'gmail.com'];
        $scope.filterData = function(value, config) {
            var list = [];
            if (value.indexOf('@') > -1) {
                var email = value.split('@');
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].indexOf(email[1]) > -1) {
                        list.push({
                            name: email[0] + '@' + arr[i]
                        });
                    }
                }
            } else {
                for (var i = 0; i < arr.length; i++) {
                    list.push({
                        name: value + '@' + arr[i]
                    });
                }
            }
            return list;
        };
        $scope.onSelected = function(item) {
            console.log($scope.autocompleteValue);
        };
    }]);
</script>

dropdown 组件

配置项：

data

  • 是否必须：是
  • 类型：array
  • 默认值：[]
  • 说明：下拉框数据，eg： [{ value: 'create', name: '新建' }, { value: 'edit', name: '编辑' }, { value: 'delete', name: '删除' }]

text

  • 是否必须：是
  • 类型：string
  • 默认值：''
  • 说明：展示值

actual-key

  • 是否必须：否
  • 类型：string
  • 默认值：'value'
  • 说明：对应data中的真值字段

display-key

  • 是否必须：否
  • 类型：string
  • 默认值：'name'
  • 说明：对应data中的展示值字段

on-selected

  • 是否必须：否
  • 类型：function
  • 默认值：function(itemData) {}
  • 说明：点击下拉菜单选项之后的回调函数
下拉菜单 
<div ng-controller="DemoDropDownCtrl">
    <sharkdropdown name="dropdown" data="data" text="'下拉菜单'" actual-key="'value'" display-key="'html'" on-selected="onSelected"></sharkdropdown>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoDropDownCtrl', ['$scope', function($scope) {
        $scope.data = [{
            value: 'create',
            html: '<span class="icon-plus"></span>&nbsp;&nbsp;新建'
        }, {
            value: 'edit',
            html: '<span class="icon-chevron-right"></span>&nbsp;&nbsp;编辑'
        }, {
            value: 'delete',
            html: '<span class="icon-close"></span>&nbsp;&nbsp;删除'
        }];
        $scope.onSelected = function(item) {
            console.log(item);
        };
    }]);
</script>

selecter 组件

配置项：

data

  • 是否必须：是
  • 类型：array
  • 默认值：[]
  • 说明：下拉框数据，eg： [{ value: '', name: '请选择' }, { value: 1001, name: '一年级' }, { value: 1002, name: '二年级' }]

actual-key

  • 是否必须：否
  • 类型：string
  • 默认值：'value'
  • 说明：对应的真值字段

display-key

  • 是否必须：否
  • 类型：string
  • 默认值：'name'
  • 说明：对应的展示值字段

active-style

  • 是否必须：否
  • 类型：string
  • 默认值：null
  • 说明：选中之后的样式，point | nike

on-selected

  • 是否必须：否
  • 类型：function
  • 默认值：function(itemData) {}
  • 说明：点击下拉框选项之后的回调函数
下拉框的值：1001 一年级 
<div ng-controller="DemoSelecterCtrl">
    下拉框的值：
    <sharkselecter name="selecter1" ng-model="selecter1Value" data="data" actual-key="'value'" display-key="'name'" on-select="onSelect"></sharkselecter>
</div>
<script type="text/javascript">
    angular.module('demoApp')
        .controller('DemoSelecterCtrl', ['$scope', function($scope) {
            $scope.selecter1Value = 1001;
            $scope.data = [{ value: '', name: '请选择' }, { value: 1001, name: '一年级' }, { value: 1002, name: '二年级' }];
            $scope.onSelect = function(){
                console.log($scope.selecter1Value);
            };
        }]);
</script>

fileupload 组件

配置项：

accept

  • 是否必须：否
  • 类型：string
  • 默认值：''
  • 说明：上传的文件类型（例：上传图片：image/jpg,image/jpeg）

autoupload

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：选择文件后是否自动上传

dragable

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：是否支持拖拽上传

url

  • 是否必须：否
  • 类型：string
  • 默认值：'/xhr/file/upload.do'
  • 说明：文件上传地址

on-selected

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：选择文件后的回调函数

on-uploading

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：文件上传中的回调函数

on-uploaded

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：文件上传后的回调函数

on-failed

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：文件上传失败后的回调函数
请选择文件
开始上传 
<style type="text/css">
.myfileupload {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #4a9ce2;
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
</style>
<div ng-controller="DemoFileuploadCtrl">
    <sharkfileupload class="myfileupload" name="fileupload" accept="'image/jpg,image/jpeg'" dragable="true" autoupload="false" on-selected="onSelected" on-uploading="onUploading" on-uploaded="onUploaded" on-failed="onFailed">
        请选择文件
    </sharkfileupload>
    <hr/>
    <button class="btn btn-success" ng-click="upload();">开始上传</button>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoFileuploadCtrl', ['$scope', function($scope) {
        $scope.filename = null;
        $scope.onSelected = function(file) {
            $scope.filename = file.name;
            console.log(arguments);
        };
        $scope.onUploading = function(file, percent) {
            console.log(arguments);
        };
        $scope.onUploaded = function(file, res) {
            alert('上传成功');
        };
        $scope.onFailed = function(file, error) {
            console.log(arguments);
        };
        $scope.upload = function() {
            $scope.fileupload.upload('/shark-angular/xhr/file/upload.do', {
                id: 1,
                name: 'test'
            });
        };
    }]);
</script>

pager 组件

配置项：

current-page

  • 是否必须：是
  • 类型：number
  • 默认值：无
  • 说明：当前是第几页

total-page

  • 是否必须：是
  • 类型：number
  • 默认值：无
  • 说明：一共有多少页

gopage

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：是否需要调转页码的按钮

hl

  • 是否必须：否
  • 类型：object
  • 默认值：{ firstpage: '首页', prevpage: '上一页', nextpage: '下一页', lastpage: '尾页', gopage: '跳转' }
  • 说明：语言配置

segment-size

  • 是否必须：否
  • 类型：number
  • 默认值：5
  • 说明：每段大小

start-from

  • 是否必须：否
  • 类型：number
  • 默认值：1
  • 说明：第1页实际对应的页码（eg.有些项目后端传的页码是从0开始的，那么startFrom设置为0）

on-page-changed

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：将要改变页码时调用的函数
<div ng-controller="DemoPagerCtrl">
    <sharkpager name="pager" current-page="pagination.page" total-page="pagination.totalPage" on-page-changed="pageChanged" hl="hl" start-from="1" segment-size="10" gopage="true"></sharkpager>
</div>
<script type="text/javascript">
    angular.module('demoApp')
        .controller('DemoPagerCtrl', ['$scope', function($scope) {
            $scope.hl = {
                firstpage: 'first',
                prevpage: 'prev',
                nextpage: 'next',
                lastpage: 'last',
                gopage: 'go'
            };
            $scope.pagination = {
                page: 5,
                totalPage: 10
            };
            $scope.pageChanged = function(page) {
                console.log($scope.pagination.page);
            };
        }]);
</script>

popover 组件

配置项：

popover-title

  • 是否必须：是
  • 类型：string
  • 默认值：''
  • 说明：头部模板

popover-content

  • 是否必须：popover-content 或 popover-content-url 必须有一个
  • 类型：string
  • 默认值：''
  • 说明：头部模板

popover-content-url

  • 是否必须：popover-content 或 popover-content-url 必须有一个
  • 类型：string
  • 默认值：''
  • 说明：头部模板的引用url

close

  • 是否必须：否
  • 类型：string
  • 默认值：'targetclick'
  • 说明：关闭方式，targetclick 点击触发的按钮关闭；bodyclick 点击body任意部位关闭

direction

  • 是否必须：否
  • 类型：string
  • 默认值：'right'
  • 说明：优先弹出方向，top right bottom left（如果left/top空间不够，会变为right/bottom）
点我 
<div ng-controller="DemoPopoverCtrl">
    <button class="btn btn-sm btn-info" name="popover" sharkpopover popover-title="'我是标题'" popover-content-url="'/shark-angular/examples/templates/popover.html'" close="'bodyclick'" direction="'right'">点我</button>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoPopoverCtrl', ['$scope', '$sce', '$timeout', function($scope, $sce, $timeout) {
        $scope.content = $sce.trustAsHtml('<b style="color:#ff0000;">I am content</b>');
        $timeout(function() {
            $scope.content = $sce.trustAsHtml('<b style="color:#0000ff;">I am content change color</b>');
        }, 2000);
    }]);
</script>

tabs 组件

配置项：

init-tab

  • 是否必须：否
  • 类型：number
  • 默认值：0
  • 说明：初始化展示第几个tab

on-tab-switch

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：tab切换时触发的函数
333333 444444 
<div ng-controller="DemoTabsCtrl">
    <sharktabs name="tabs" init-tab="0" on-tab-switch="tabSwitch">
        <ul class="nav nav-tabs">
            <li>
                <a href="javascript:void(0);">Home</a>
            </li>
            <li>
                <a href="javascript:void(0);">Profile</a>
            </li>
            <li>
                <a href="javascript:void(0);">Messages</a>
            </li>
            <li>
                <a href="javascript:void(0);">Settings</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" tabs-content-url="/shark-angular/examples/templates/tabs-1.html">
            </div>
            <div class="tab-pane" tabs-content-url="/shark-angular/examples/templates/tabs-2.html"> 
            </div>
            <div class="tab-pane">
                333333
            </div>
            <div class="tab-pane">
                444444
            </div>
        </div>
    </sharktabs>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoTabsCtrl', ['$scope', '$timeout', 'sharkmodal', function($scope, $timeout, sharkmodal) {
        $scope.tabSwitch = function(index) {
            console.log('tab切换到：' + index);
        };
        $scope.tab1 = "111111";
        $scope.tab2 = "222222";
        $scope.openDialog = function(size) {
            alert('点击了我');
        };
    }]);
</script>

tree 组件

配置项：

data

  • 是否必须：是
  • 类型：object
  • 默认值：[]
  • 说明：树组件的数据

checkable

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：是否可check

autolink

  • 是否必须：否
  • 类型：boolean
  • 默认值：true
  • 说明：check一个节点后，是否关联其父节点和子节点的选中状态（只有checkable为true时才生效）

pre-expand

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明： 是否需要预先展开树

pre-selects

  • 是否必须：否
  • 类型：boolean
  • 默认值：无
  • 说明：需要预先选中某些节点。如果要使用pre-selects，pre-expand必须要设置为true

selectable

  • 是否必须：否
  • 类型：boolean
  • 默认值：false
  • 说明：是否可select

on-checked

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：checked时的回调函数

on-selected

  • 是否必须：否
  • 类型：function
  • 默认值：无
  • 说明：selected时的回调函数

name

  • 是否必须：否
  • 类型：string
  • 默认值：无
  • 说明：暴露在scope上的tree组件对象，可以用来操作树。
  • 所有组件
    • autocomplete组件
    • dropdown组件
    • fileupload组件
    • modal组件
    • pager组件
    • popover组件
    • selecter组件
    • tabs组件
    • toastr组件
    • tree组件
全选 反选 不选 开始构建 
<div ng-controller="DemoTreeCtrl">
    <sharktree name="tree" data="data" checkable="true" autolink="false" pre-expand="true" pre-selects="preSelects" on-checked="onChecked"></sharktree>
    <button class="btn btn-default" ng-click="checkAll();">全选</button>
    <button class="btn btn-default" ng-click="reverseCheckAll();">反选</button>
    <button class="btn btn-default" ng-click="checkNo();">不选</button>
    <button class="btn btn-success" ng-click="build();">开始构建</button>
</div>
<script type="text/javascript">
angular.module('demoApp')
    .controller('DemoTreeCtrl', ['$scope', function($scope) {
        $scope.data = [{
            node_id: 'all',
            node_name: '所有组件',
            children: [{
                node_id: 'autocomplete',
                node_name: 'autocomplete组件'
            }, {
                node_id: 'dropdown',
                node_name: 'dropdown组件'
            }, {
                node_id: 'fileupload',
                node_name: 'fileupload组件'
            }, {
                node_id: 'modal',
                node_name: 'modal组件'
            }, {
                node_id: 'pager',
                node_name: 'pager组件'
            }, {
                node_id: 'popover',
                node_name: 'popover组件'
            }, {
                node_id: 'selecter',
                node_name: 'selecter组件'
            }, {
                node_id: 'tabs',
                node_name: 'tabs组件'
            }, {
                node_id: 'toastr',
                node_name: 'toastr组件'
            }, {
                node_id: 'tree',
                node_name: 'tree组件'
            }]
        }];
        $scope.preSelects = ['all'];
        $scope.onChecked = function(node, isChecked) {
            console.log(node, isChecked);
        };
        $scope.checkAll = function() {
            $scope.tree.checkAll();
        };
        $scope.reverseCheckAll = function() {
            $scope.tree.reverseCheck();
        };
        $scope.checkNo = function() {
            $scope.tree.checkNo();
        };
        $scope.build = function() {
            var nodes = $scope.tree.getCheckedNodes();
            var modules = [];
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].node_id !== 'all') {
                    modules.push(nodes[i].node_id);
                }
            };
            window.open('/shark-angular/custom/build/modules/shark-angular.ui.js?modules=' + modules.join(','));
        };
    }]);
</script>
网易公司版权所有 © 1997-2017 丨 关于网易

    本文对你有帮助？欢迎扫码加入前端学习小组微信群：

    avatar
    文章
    阅读
    粉丝