[comp: Typography] add component Typography

[LaamGinghong]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解决文章排布问题，对不同的标签提供各种不同的样式封装。

What does the proposed API look like?

ix-typoraphy 指令

全局指令，使用方式如下：

<template>
	<article ix-typoraphy>
    	<h1 ix-typoraphy="titleOptions">Title</h1>
        <p ix-typoraphy="paragraphOptions">In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the <span ix-typoraphy="textOptions">efficiency</span> of development.</p>
    </article>
</template>

<script>
	export default {
        data() {
       		 return {
                 titleOptions: {},
                 paragraphOptions: {},
                 textOptions: {}
             }    
        }
    }
</script>

options

标题、段落、文本的配置选项

名称	说明	类型	默认值	备注
code	添加代码样式	boolean	false	-
delete	添加删除线样式	boolean	false	-
disabled	添加禁用文本样式	boolean	false	-
mark	添加标记样式	boolean	false	-
strong	添加粗体样式	boolean	false	-
underline	添加下划线样式	boolean	false	-
type	文本类型	TyporaphyType	-	-

type TyporaphyType = 'secondary' | 'success' | 'warning' | 'danger'

[LaamGinghong]

@danranVm review

[danranVm]

建议参考 ng-zorro, 把 ix-typoraphy-text ix-typography-title ix-typography-paragraph 合并成一个组件。
不然用起来太麻烦了。

[danranVm]

Copyable Editable Ellipsis 能否封装成指令？

[LaamGinghong]

Copyable Editable Ellipsis 能否封装成指令？

指令好像不能限制对应组件使用吧，如果是那样的话每个组件都能使用这个指令？

[LaamGinghong]

建议参考 ng-zorro, 把 ix-typoraphy-text ix-typography-title ix-typography-paragraph 合并成一个组件。
不然用起来太麻烦了。

不知道vue有没有指令型组件啊

[danranVm]

Copyable Editable Ellipsis 能否封装成指令？

指令好像不能限制对应组件使用吧，如果是那样的话每个组件都能使用这个指令？

对，目的就是希望这样，例如：

<span v-copyable>text</span>
<div v-editable >text</span>

而不是一定要使用 typoraphy 组件

[danranVm]

建议参考 ng-zorro, 把 ix-typoraphy-text ix-typography-title ix-typography-paragraph 合并成一个组件。
不然用起来太麻烦了。

不知道vue有没有指令型组件啊

vue 指令的功能比较弱，可能需要想其他办法。
我暂时想到的就是让用户指定 tag:

<ix-typoraphy tag="h1"> H1 Titile </ix-typoraphy>
<ix-typoraphy tag="p"> paragraph </ix-typoraphy>
<ix-typoraphy tag="code"> code </ix-typoraphy>

[hele10086]

将这个组件进行一个拆分，把交互功能的 editor,copyable,ellipsis 这几个做成组件，而 typograph 自身作为一个纯粹的样式类的封装，并且通过指令的方式使用。

[LaamGinghong]

@hele10086 @danranVm 请重新review

[danranVm]

参考 ng-zorro: https://ng.ant.design/components/typography/zh#components-typography-demo-text

    <span nz-typography><mark>Ant Design (mark)</mark></span>
    <span nz-typography><code>Ant Design (code)</code></span>
    <span nz-typography><kbd>Ant Design (keyboard)</kbd></span>
    <span nz-typography><u>Ant Design (underline)</u></span>
    <span nz-typography><del>Ant Design (delete)</del></span>
    <span nz-typography><strong>Ant Design (strong)</strong></span>

似乎只需要两个 props 就可以了？默认为 type

  <span ix-typography="'success'">success</span>
  <span ix-typography="'danger'">danger</span>
  <span ix-typography="{type:'success', disabled: true}">success and disabled</span>

[LaamGinghong]

参考 ng-zorro: https://ng.ant.design/components/typography/zh#components-typography-demo-text

    <span nz-typography><mark>Ant Design (mark)</mark></span>
    <span nz-typography><code>Ant Design (code)</code></span>
    <span nz-typography><kbd>Ant Design (keyboard)</kbd></span>
    <span nz-typography><u>Ant Design (underline)</u></span>
    <span nz-typography><del>Ant Design (delete)</del></span>
    <span nz-typography><strong>Ant Design (strong)</strong></span>

似乎只需要两个 props 就可以了？默认为 type

  <span ix-typography="'success'">success</span>
  <span ix-typography="'danger'">danger</span>
  <span ix-typography="{type:'success', disabled: true}">success and disabled</span>

那好像 type 就够用了，disabled 用 html 元素上面的 disabled

[danranVm]

有些元素不支持 disabled ... 动态 disabled 的时候编译的结果不一致，button 组件做了一下处理。

<component :is="tag" class="ix-button" :class="classes" :disabled="disabled || loading ? true : undefined">

不然会这样子：

<button :disabled="disabled"> Button </button>
<a :disabled="disabled"> A </a>

编辑结果:

<!-- 当 `disabled` 为 false 的时候 -->
<button> Button </button>
<a disabled="false"> A </a>

<!-- 当 `disabled` 为 true 的时候 -->
<button disabled> Button </button>
<a disabled="true"> A </a>

<!-- 当 `disabled` 为 undefined 的时候 -->
<button> Button </button>
<a> A </a>