View UI plus released version 1.2.0 and added image, skeleton and typography components

View UI Plus 1.2.0 The version is on 2022-06-13 Release .

Update log

Please go to the official website www.iviewui.com Check out the latest version of .

• New typesetting component Typography, Built in rich content layout UI, Support copy 、 Editable 、 Omit and other functions .Typography contain 5 A component ：

  • Typography Content structure

  • Title title

  • Paragraph The paragraph

  • Text Inline text

  • Link link

• Add a skeleton screen component Skeleton.

• New picture component Image. There are two components ：

  • Image picture

  • ImagePreview Preview picture

• Repair part CSS Problems that go wrong in some environments .

• Repair Row Components types Wrong question .

• Repair Alert The component icon is not centered .

Update method

1. modify package.json in view-ui-plus Version number ：

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

2. function npm update view-ui-plus.

Content abstract

Image Picture components

The picture component can be used for various typesetting of a picture , Use fit Property to set various zoom effects for the picture ,width and height You can set the width and height of the picture ,src Specify the picture address , such as ：

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

Set properties lazy You can load pictures lazily , By default, it will automatically find the latest one overflow The value is auto or scroll Parent element of . When scrolling to the visible area of the picture , Will load the picture . Of course , You can also set properties scroll-container To specify the container . You can experience the lazy loading of pictures online here ： https://run.iviewui.com/HoVFMqS7

besides , The picture component can also customize the loading prompt 、 Load failure prompt and other common attributes . You can see file API

ImagePreview Picture preview component

Picture preview can be done in Image Open properties on the component preview Use , Or directly used alone ImagePreview Image preview component ：

Picture preview needs to specify a set of picture addresses preview-list And the default number of images displayed initial-index.

Picture preview support Zoom in 、 narrow 、 rotate 、1:1 Look at the original picture 、 Forward and backward switching And so on , It also supports keyboard operation .

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

Skeleton Frame screen assembly

The skeleton screen component is used to provide a placeholder combination where data needs to be loaded .

Basic effect , Include head image 、 title 、 The paragraph

The skeleton screen can also be customized , Such as length 、 Height 、 shape 、 Animation 、 Typesetting, etc

Typography Typesetting components

Show the title 、 The paragraph 、 List, etc , Often used in articles 、 Document layout .

Support common accessibility , Like copying 、 Editable 、 Ellipsis, etc .

Typography Every component of , Can be turned on Copy function , Just one parameter copyable：

<Paragraph copyable> This is a piece of text that can be copied </Paragraph>

It also supports directly on the current paragraph Edit and save , Just turn it on editable attribute ：

Editing support from Default slot Read , Or directly through 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: ' Text that can be edited and saved directly ',
        content2: ' Also support  v-model  Fast binding '
      }
    },
    methods: {
      handleSave1 (content) {
        this.content1 = content;
      }
    } 
  }
</script>

For long paragraphs , You can also turn on properties ellipsis Omit , And Tooltip Display the complete content in the form of ：

More complete content , succeed in inviting sb. View Design Official website view ：iView / View Design A set of enterprise class UI Component libraries and front-end solutions