View UI Plus released version 1.2.0, adding Image, Skeleton, Typography components

View UI Plus version 1.2.0 was released on 2022-06-13.

Changelog

Please go to the official website www.iviewui.com to check the latest version.

• New typesetting component Typography , built-in rich content typesetting UI, supports copying, editing, omitting and other functions. Typography contains a total of 5 components:

  • Typography Content Structure
  • Title title
  • Paragraph paragraph
  • Text inline text
  • Link link
• Added skeleton screen component Skeleton .

• Added image component Image . Contains two components:

  • image
  • ImagePreview image preview
• Fixed some CSS errors in some environments.
• Fix Row component type error.
• Fix the problem that the Alert component icon is not centered.

update method

1. Modify package.json medium view-ui-plus version number:

 "dependencies": {
    "view-ui-plus": "^1.2.0"
 }

2. Run npm update view-ui-plus .

brief introduction

Image picture component

The picture component can easily make various typeset of a picture. Use the fit attribute to set various zoom effects of the picture, width and height can set the width of the picture High, src specify the image address, for example:

 <Image 
    src="https://file.iviewui.com/images/image-demo-11.jpg" 
    fit="contain" 
    width="100px" 
    height="100px"
/>

Setting the property lazy can lazily load the image. By default, it will automatically find the parent element whose overflow value is auto or scroll. The image will only be loaded when scrolling to the visible area of the image. Of course, you can also set the property scroll-container to specify the container.
You can go here to experience image lazy loading online:
https://run.iviewui.com/HoVFMqS7

In addition, the image component can also customize common properties such as loading prompts and loading failure prompts. For details, see the documentation API

ImagePreview image preview component

The image preview can be used on the Image component preview , or directly used alone ImagePreview image preview component:

The image preview needs to specify a set of image addresses preview-list and the first few images displayed by default initial-index .

The picture preview supports functions such as zoom in, zoom out , rotation , 1:1 viewing of the original image , and switching back and forth. It also supports keyboard operation.

Online experience address: https://run.iviewui.com/T2V78Fay

Skeleton Skeleton Screen Components

The Skeleton Screen component is used to provide a placeholder composition where data needs to be loaded.

Basic effects, including avatars, titles, paragraphs

The skeleton screen can also be customized, such as length, height, shape, animation, typography, etc.

Typography components

Display titles, paragraphs, lists, etc., and are often used in the typesetting of articles and documents.

Support common auxiliary functions, such as copy, editable, omit, etc.

Each component of Typography can enable the copy function, only one parameter copyable is required:

 <Paragraph copyable>这是一段可以被复制的文本</Paragraph>

It also supports editing and saving directly on the current paragraph, just open the editable attribute:

Editing supports reading from 默认 slot , or directly via v-model two-way binding data:

 <template>
  <Paragraph editable @on-edit-end="handleSave1">{{ content1 }}</Paragraph>
  <Paragraph v-model="content2" editable />
</template>
<script>
  export default {
    data () {
      return {
        content1: '可以直接编辑并保存的文本',
        content2: '也支持 v-model 快速绑定'
      }
    },
    methods: {
      handleSave1 (content) {
        this.content1 = content;
      }
    } 
  }
</script>

For long paragraphs, you can also turn on the attribute ellipsis to omit, and display the full content in the form of Tooltip :

For more complete content, please visit the View Design official website: https://www.iviewui.com/